/* =============================================================================
   FORNITURAS TEXTILES — hoja propia sobre Warehouse 4.8.2 (PrestaShop 9)
   -----------------------------------------------------------------------------
   Se carga DESPUES del CSS del tema. NO se edita ningun fichero de Warehouse,
   para que el tema pueda actualizarse dentro de la rama 4.8.x sin perder nada.

   Ubicacion prevista en el servidor:
     /themes/warehouse/assets/css/fornituras.css
     /themes/warehouse/assets/fonts/*.woff2
   Se encola desde el campo de CSS personalizado del editor de Warehouse
   (Diseno > Theme editor > Custom CSS) o desde un modulo de encolado.

   Concepto: una hoja de especificacion tecnica publicada en web.
   Papel claro, retICula acotada, filete de 1 px, rotulos monoespaciados,
   un unico gesto de movimiento. Cero radios, cero sombras.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. TIPOGRAFIA AUTOALOJADA
   Los .woff2 van en /themes/warehouse/assets/fonts/. Mientras no esten, cae
   limpiamente a la pila del sistema: la web no se rompe, solo cambia de cara.
   Subset latin + latin-ext. Presupuesto conjunto <= 110 KB.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Archivo FT";
  src:url("../fonts/archivo-500-700.woff2") format("woff2");
  font-weight:500 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Plex Sans FT";
  src:url("../fonts/plexsans-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Plex Sans FT";
  src:url("../fonts/plexsans-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Plex Mono FT";
  src:url("../fonts/plexmono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

/* Warehouse carga Karla desde fonts.googleapis.com. Se anula aqui y se quitara
   tambien del editor del tema: mandar la IP del visitante a un tercero en EE.UU.
   antes de cualquier consentimiento no encaja con la politica de privacidad
   que la propia web publica. */


/* -----------------------------------------------------------------------------
   2. PALETA CERRADA — "verde profundo sobre papel"
   Verde = marca (90 % del color). Rojo = bisturi (<=5 % del area visible).
   Ratios WCAG comprobados uno a uno. Nada fuera de esta lista. Ningun degradado.
   -------------------------------------------------------------------------- */
:root{
  --papel:#F7F6F3;          /* fondo general, blanco calido de papel */
  --hoja:#FFFFFF;           /* fondo de tabla, ficha y formulario */
  --tinta:#101512;          /* texto — 17,07:1 sobre papel */
  --tinta-70:#3F4A44;       /* texto secundario — 8,54:1 */
  --tinta-55:#5F6B65;       /* rotulos mono y unidades — 5,14:1 */
  --linea:#C9D0CB;          /* filete estructural (decorativo) */
  --linea-fuerte:#BFC7C1;   /* cierre de tabla y separacion de seccion */
  --verde:#C1121F;          /* ROJO de marca (rediseno dosier 07/10/2026) — 5,6:1 con blanco */
  --verde-hover:#99101A;    /* rojo oscuro (hover) */
  --banda:#121110;          /* fondo bandas oscuras: near-black dosier */
  --verde-claro:#E7504A;    /* acento rojo claro dentro de banda oscura */
  --rojo:#A81C1C;           /* 7,37:1 sobre blanco */
  --borde-campo:#7A867F;    /* 3,79:1 — cumple el 3:1 exigible a un control */
  --linea-banda:#325046;

  /* PENDIENTE: --verde debe muestrearse del logotipo original cuando llegue
     en vectorial. Cualquier sustituto tiene que dar >= 4,5:1 con blanco. */

  --mono:"Plex Mono FT","IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --sans:"Plex Sans FT","IBM Plex Sans","Segoe UI",Arial,sans-serif;
  --disp:"Archivo FT","Archivo","Helvetica Neue",Arial,sans-serif;

  /* escala de SIETE pasos, ni uno mas */
  /* Tamanos en px, nunca en rem: Warehouse fija html{font-size} a 14 px en
     escritorio y 12 px en movil, y un rem saldria un 12-25 % mas pequeno de
     lo disenado (visto el 10/09/2026). */
  --t-micro:clamp(11px,.72vw,12px);
  --t-dato:clamp(15px,.95vw,16px);
  --t-texto:clamp(16px,1.05vw,17px);
  --t-h4:clamp(17px,1.2vw,19px);
  --t-h3:clamp(20px,1.7vw,24px);
  --t-h2:clamp(26px,3.2vw,42px);
  --t-h1:clamp(34px,5vw,58px);

  /* espaciado: escala fija de 10 pasos */
  --e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;
  --e6:32px;--e7:48px;--e8:64px;--e9:96px;--e10:128px;

  --curva:cubic-bezier(.16,.84,.44,1);
}

/* alto de fila fluido CON SUELO tactil de 44 px */
:root{
  --artboard:1440;--fluidez:.5;
  --u:calc((100vw/var(--artboard))*var(--fluidez) + (1 - var(--fluidez))*1px);
  --fila:max(44px,calc(52*var(--u)));
}

/* evita el salto de 15 px cuando aparece la barra de scroll */
body{--sbw:calc(100vw - 100%)}


/* -----------------------------------------------------------------------------
   3. PUENTE CON BOOTSTRAP 5.3 (Warehouse va sobre BS 5.3.3)
   Reescribiendo las variables de Bootstrap, casi todo el tema hereda la
   identidad sin pelear selector a selector.
   -------------------------------------------------------------------------- */
:root{
  --bs-body-bg:var(--papel);
  --bs-body-color:var(--tinta);
  --bs-body-font-family:var(--sans);
  --bs-body-font-size:var(--t-texto);
  --bs-body-line-height:1.55;
  --bs-emphasis-color:var(--tinta);
  --bs-secondary-color:var(--tinta-70);
  --bs-tertiary-color:var(--tinta-55);

  --bs-primary:var(--verde);
  --bs-primary-rgb:20,82,59;
  --bs-link-color:var(--verde);
  --bs-link-color-rgb:20,82,59;
  --bs-link-hover-color:var(--verde-hover);
  --bs-danger:var(--rojo);
  --bs-danger-rgb:168,28,28;

  --bs-border-color:var(--linea);
  --bs-border-width:1px;
  --bs-border-radius:0;
  --bs-border-radius-sm:0;
  --bs-border-radius-lg:0;
  --bs-border-radius-xl:0;
  --bs-border-radius-2xl:0;
  --bs-border-radius-pill:0;

  --bs-heading-color:var(--tinta);
  --bs-font-monospace:var(--mono);
}


/* -----------------------------------------------------------------------------
   4. RESET DE FORMA — cero radios, cero sombras, en todo el sistema
   El radio pequeno "por si acaso" es justo lo que delata la duda.
   -------------------------------------------------------------------------- */
/* CORRECCION DE BASE, y no es cosmetica.
   Warehouse declara `body, html { height:100% }` y ps_facetedsearch anade
   `body { overflow-x:hidden }`. Juntos convierten el body en un contenedor de
   632 px con scroll propio: el `overflow-y` pasa a `auto` porque el otro eje
   deja de ser `visible`. Consecuencias reales: position:sticky deja de
   funcionar, los anclas no saltan bien y cualquier efecto ligado al scroll se
   rompe. `clip` recorta igual en horizontal pero NO crea contenedor de scroll. */
html,body{height:auto !important;min-height:100%}
body{overflow-x:clip;overflow-y:visible !important}

*,*::before,*::after{border-radius:0 !important}
.card,.btn,.form-control,.form-select,.dropdown-menu,.modal-content,.alert,
.nav-link,.badge,.input-group-text,.toast,.offcanvas,.popover,.tooltip-inner,
.product-miniature,.thumbnail-container,.page-link{box-shadow:none !important}
/* backdrop-filter hunde el movil de gama media que lleva medio departamento de compras */
*{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}


/* -----------------------------------------------------------------------------
   5. RETICULA ARITMETICA PROPIA
   12 / canal 20 / margen 24 en escritorio · 6 / 10 / 16 en movil · lienzo 1320.
   Convive con la .container de Bootstrap: se usa donde montamos bloques propios.
   -------------------------------------------------------------------------- */
:root{
  --cols:12;--margen:24px;--canal:20px;--ancho:1320px;
  --vpw:calc(100vw - var(--sbw,0px));
  --lienzo:min(var(--vpw),var(--ancho));
  --col:calc((var(--lienzo) - 2*var(--margen) - (var(--cols) - 1)*var(--canal))/var(--cols));
}
@media(max-width:767px){:root{--cols:6;--canal:10px;--margen:16px}}

.ft-rejilla{
  display:grid;width:min(100%,var(--ancho));margin-inline:auto;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--canal);padding-inline:var(--margen);
}
.ft-env{width:min(100%,var(--ancho));margin-inline:auto;padding-inline:var(--margen)}


/* -----------------------------------------------------------------------------
   6. TIPOGRAFIA
   Cero cursivas en todo el sitio. Maximo tres tamanos por pantalla.
   tabular-nums obligatorio en TODA cifra.
   -------------------------------------------------------------------------- */
body{
  background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-size:var(--t-texto);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4{font-family:var(--disp);color:var(--tinta);text-wrap:balance;margin-top:0}
h1,.h1{font-weight:600;font-size:var(--t-h1);letter-spacing:-.022em;line-height:1.04}
h2,.h2{font-weight:600;font-size:var(--t-h2);letter-spacing:-.015em;line-height:1.1}
h3,.h3{font-weight:500;font-size:var(--t-h3);letter-spacing:-.01em;line-height:1.2}
h4,.h4{font-weight:600;font-size:var(--t-h4);letter-spacing:-.005em;line-height:1.25}
p{max-width:68ch}
i,em,.fst-italic{font-style:normal !important}

/* rotulo monoespaciado — el registro del documento tecnico */
.ft-rot,
.product-reference .label,
.product-features .data-sheet dt.name,
.product-quantities .label,
.specific-references .label{
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-55);
  margin-right:-.18em;      /* el tracking de la ultima letra no descuadra el borde */
}
.ft-num,
.product-features .data-sheet dd.value,
.product-quantities span,
.ft-tabla dd{font-variant-numeric:tabular-nums}


/* -----------------------------------------------------------------------------
   7. FILETES — toda separacion se hace con 1 px, nunca con sombra
   -------------------------------------------------------------------------- */
.ft-hl{border-top:1px solid var(--linea)}
@media(min-resolution:2dppx){.ft-hl{border-top-width:.5px}}


/* -----------------------------------------------------------------------------
   7b. ENLACES - el color sale de una variable
   El editor del tema (modules/iqitthemeeditor/views/css/custom_s_1.css) pinta
   todos los enlaces de #777, y de #333 al pasar por encima, con selectores de
   especificidad 0,3,1:  a:link:not(.nav-link):not(.btn)
   Casi todas las reglas de esta hoja tienen menos (.ft-nota a = 0,1,1), asi
   que perdian sin que se notara: la barra movil "Llamar / Presupuesto" salio
   gris sobre verde, con contraste 2:1 (visto el 10/09/2026).
   Se le gana UNA vez aqui, con la misma especificidad y cargando despues, y el
   color pasa a leerse de --ft-enlace. Cada componente fija --ft-enlace en su
   propia regla: la variable y el color son propiedades distintas, asi que no
   compiten por especificidad.
   REGLA PARA LO QUE VENGA: toda regla que de color a un enlace fija tambien
   --ft-enlace con el mismo valor. Los .btn quedan fuera (el tema los excluye).
   El tema tiene ademas reglas con #id (#wrapper .breadcrumb a, #header
   .header-nav a, #footer-container-main a...: hasta 1,2,1); por eso la regla
   global lleva tambien #wrapper, #header y #footer delante.
   -------------------------------------------------------------------------- */
a:link:not(.nav-link):not(.btn),
a:visited:not(.nav-link):not(.btn),
a:hover:not(.nav-link):not(.btn),
#wrapper a:not(.nav-link):not(.btn),
#header a:not(.nav-link):not(.btn),
#footer a:not(.nav-link):not(.btn){color:var(--ft-enlace,var(--verde))}
/* La miga de pan: gris que si cumple AA (el del tema, #8f8f8f, da 3:1). */
.breadcrumb a{--ft-enlace:var(--tinta-55)}
.breadcrumb a:hover{--ft-enlace:var(--verde)}


/* -----------------------------------------------------------------------------
   8. FICHA TECNICA — COMPONENTE MAESTRO
   Marcado real de Warehouse:
     <section class="product-features">
       <dl class="data-sheet"><dt class="name">…</dt><dd class="value">…</dd></dl>
     </section>
   Rotulo mono a la izquierda, valor Plex Sans 500 tabular a la derecha.
   REGLA DE CAMPO VACIO: un dato que no existe no se pinta. Se controla desde
   el back office no rellenando la caracteristica; PrestaShop ya la omite.
   -------------------------------------------------------------------------- */
.product-features{margin-top:var(--e5)}
.product-features .data-sheet{
  display:grid;grid-template-columns:minmax(150px,auto) 1fr;
  gap:1px;background:var(--linea);
  border:1px solid var(--linea-fuerte);
  margin:0;
}
.product-features .data-sheet > dt,
.product-features .data-sheet > dd{
  background:var(--hoja);margin:0;padding:10px 14px;
  min-height:var(--fila);display:flex;align-items:center;
  font-size:var(--t-dato);
}
.product-features .data-sheet > dd.value{color:var(--tinta);font-weight:500}
@media(max-width:767px){
  /* no se scrollea en horizontal: rotulo encima, valor debajo */
  .product-features .data-sheet{grid-template-columns:1fr}
  .product-features .data-sheet > dt{padding-bottom:2px;min-height:0;border-bottom:0}
  .product-features .data-sheet > dd{padding-top:2px}
}

/* la REFERENCIA al mismo peso jerarquico que el nombre:
   "esto es un articulo de un sistema, no una foto bonita" */
.product-reference{margin-bottom:var(--e2);display:block}
.product-reference .label{display:block;font-size:var(--t-micro);margin-bottom:2px}
.product-reference span{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(20px,1.7vw,24px);letter-spacing:.06em;color:var(--tinta-55);
}

/* pie fijo de ficha */
.ft-pie-ficha{
  margin-top:var(--e4);display:flex;flex-direction:column;gap:var(--e2);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-55);line-height:1.9;
}

/* NUNCA se publica la marca del fabricante (instruccion del titular 09/09/2026:
   evita que el cliente compre directamente al fabricante). */
.product-manufacturer,
#product-details .product-manufacturer,
.manufacturer-logo,
.product-brand{display:none !important}

/* cero animacion dentro de la ficha: es un documento, no una experiencia */
#main-product-wrapper *,
.product-features *{animation:none !important}


/* -----------------------------------------------------------------------------
   9. BLOQUE DE PRECIO — la ausencia de precio se disena, no se disimula
   Sustituye al bloque de precio/carrito de Warehouse en modo catalogo.
   -------------------------------------------------------------------------- */
.product-prices,
.product-add-to-cart,
.product-quantity,
#add-to-cart-or-refresh .product-add-to-cart{display:none !important}

.ft-precio{
  border:1px solid var(--linea-fuerte);background:var(--hoja);
  padding:var(--e5);margin-block:var(--e5);max-width:760px;
}
.ft-precio .valor{
  font-family:var(--disp);font-weight:500;font-size:var(--t-h3);
  letter-spacing:-.01em;margin-top:var(--e3);
}
.ft-precio p{margin-top:var(--e3);font-size:var(--t-dato);color:var(--tinta-70)}
.ft-precio .ft-acciones{margin-top:var(--e5)}


/* -----------------------------------------------------------------------------
   10. BOTONES
   -------------------------------------------------------------------------- */
.btn,.btn-primary,.btn-outline-primary,.btn-secondary{
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;
  min-height:var(--fila);padding:0 22px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  border:1px solid var(--verde);background:var(--verde);color:#fff;
  transition:background .12s linear,color .12s linear,border-color .12s linear;
}
.btn:hover,.btn-primary:hover{background:var(--verde-hover);border-color:var(--verde-hover);color:#fff}
.btn:active,.btn-primary:active{transform:translateY(1px);transition:transform .08s linear}
.btn-secondary,.btn-outline-primary,.ft-btn-sec{
  background:transparent;color:var(--tinta);border-color:var(--borde-campo);
}
.btn-secondary:hover,.btn-outline-primary:hover,.ft-btn-sec:hover{
  background:var(--hoja);color:var(--verde);border-color:var(--verde);
}

/* foco visible propio y coherente */
:where(a,button,input,select,textarea,summary,.btn):focus-visible{
  outline:2px solid var(--tinta);outline-offset:2px;
}
.ft-banda :where(a,button,.btn):focus-visible{outline-color:var(--verde-claro)}

/* salto al contenido */
.ft-saltar{
  position:absolute;left:-9999px;top:0;z-index:1080;
  background:var(--verde);color:#fff;--ft-enlace:#fff;padding:12px 18px;text-decoration:none;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;
}
.ft-saltar:focus{left:var(--margen);top:var(--e2)}


/* -----------------------------------------------------------------------------
   11. CONTROLES DE FORMULARIO
   El filete decorativo (1,45:1) NO vale para un input. --borde-campo da 3,79:1.
   -------------------------------------------------------------------------- */
.form-control,.form-select,input[type=text],input[type=email],input[type=tel],
input[type=search],textarea,select{
  font-family:var(--sans);font-size:var(--t-dato);color:var(--tinta);
  background:var(--hoja);border:1px solid var(--borde-campo);
  min-height:var(--fila);padding:8px 12px;
}
.form-control:focus,.form-select:focus,textarea:focus{
  border-color:var(--verde);box-shadow:none;outline:2px solid var(--verde);outline-offset:-1px;
}
textarea.form-control{font-family:var(--mono);font-size:13px;line-height:1.7;min-height:120px}
label,.form-label{
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-55);
}
.ft-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* -----------------------------------------------------------------------------
   12. LISTADO DE REFERENCIAS
   Rejilla con gap:1px sobre fondo de linea: se ve una hoja cuadriculada,
   no un escaparate.
   -------------------------------------------------------------------------- */
.ft-listado{
  border:1px solid var(--linea-fuerte);background:var(--linea);
  display:grid;gap:1px;grid-template-columns:1fr;margin-top:var(--e7);
}
.ft-listado .cab,.ft-listado .fila{
  background:var(--hoja);display:grid;
  grid-template-columns:210px 1fr 190px;gap:var(--canal);
  padding:11px var(--e4);align-items:center;min-height:var(--fila);
}
.ft-listado .cab{background:var(--papel)}
.ft-listado .cab span{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-55);
}
.ft-listado .fila{border-left:2px solid transparent;transition:background .12s linear,border-color .12s linear}
.ft-listado .fila:hover{background:var(--papel);border-left-color:var(--verde)}
.ft-listado .fila .r{font-family:var(--mono);font-size:var(--t-dato);letter-spacing:.04em;color:var(--tinta-55)}
.ft-listado .fila .u{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-55);text-align:right;
}
@media(max-width:767px){
  .ft-listado .cab{display:none}
  .ft-listado .fila{grid-template-columns:1fr;gap:4px;padding:12px var(--e4)}
  .ft-listado .fila .u{text-align:left}
}

/* tarjetas de producto del tema: fuera pastilla, fuera sombra */
.product-miniature,.thumbnail-container{
  background:var(--hoja);border:1px solid var(--linea);
  transition:border-color .12s linear;
}
.product-miniature:hover,.thumbnail-container:hover{border-color:var(--verde)}
.product-title a{font-family:var(--sans);font-weight:500;color:var(--tinta);--ft-enlace:var(--tinta)}


/* -----------------------------------------------------------------------------
   13. TABLA DE CONDICIONES / DATOS
   -------------------------------------------------------------------------- */
.ft-tabla{
  border:1px solid var(--linea-fuerte);background:var(--linea);
  display:grid;grid-template-columns:minmax(190px,1fr) 2fr;gap:1px;margin:0;
}
.ft-tabla > dt,.ft-tabla > dd{
  background:var(--hoja);margin:0;padding:13px var(--e4);
  font-size:var(--t-dato);display:flex;align-items:center;
}
.ft-tabla > dt{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-55);
}
.ft-falta{
  color:var(--rojo);font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.1em;font-weight:400;
}
@media(max-width:640px){.ft-tabla{grid-template-columns:1fr}}


/* -----------------------------------------------------------------------------
   14. BANDAS OSCURAS — exactamente DOS por pagina, ni una mas
   Con cuatro deja de significar nada.
   -------------------------------------------------------------------------- */
.ft-banda{
  background:var(--banda);color:var(--papel);
  --linea:var(--linea-banda);--linea-fuerte:var(--linea-banda);--hoja:transparent;
}
.ft-banda h1,.ft-banda h2,.ft-banda h3{color:var(--papel)}
.ft-banda .ft-rot{color:#A9B5AF}          /* 7,15:1 sobre banda */
.ft-banda .ft-acento{color:var(--verde-claro)}
.ft-banda a{color:var(--verde-claro);--ft-enlace:var(--verde-claro)}


/* -----------------------------------------------------------------------------
   15. CABECERA Y PIE
   -------------------------------------------------------------------------- */
#header,.header-nav,.header-top{background:var(--papel);border-bottom:1px solid var(--linea-fuerte)}
#header .menu-top a,.header-nav a{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-70);--ft-enlace:var(--tinta-70);text-decoration:none;
}
#header a:hover{color:var(--verde);--ft-enlace:var(--verde)}
#header .active > a{color:var(--tinta);--ft-enlace:var(--tinta);border-bottom:2px solid var(--rojo)}
/* los desplegables se abren en 0 ms: un menu que tarda 200 ms se percibe lento */
#header .dropdown-menu,.iqitmegamenu-submenu{transition:none !important;animation:none !important}

/* --- logo: el fichero es de 777x334; sin tope se come media pantalla --- */
#desktop_logo img.logo,
#mobile_logo img.logo,
.header-logo img{max-height:60px;width:auto;height:auto}
@media(max-width:767px){#desktop_logo img.logo,#mobile_logo img.logo,.header-logo img{max-height:42px}}
#desktop-header .header-top{padding-block:var(--e4)}

/* --- barra superior de enlaces legales --- */
.header-nav{background:var(--papel);border-bottom:1px solid var(--linea);padding-block:6px}
.header-nav a{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-55);--ft-enlace:var(--tinta-55);text-decoration:none;
}
.header-nav a:hover,#header .header-nav a:hover{color:var(--verde);--ft-enlace:var(--verde)}
.header-nav .block-links-inline ul{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);margin:0;padding:0;list-style:none}

/* --- buscador --- */
#search_widget .form-control{
  border:1px solid var(--borde-campo);background:var(--hoja);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;
  min-height:var(--fila);padding:8px 14px;
}
#search_widget .form-control::placeholder{color:var(--tinta-55);text-transform:uppercase;letter-spacing:.14em}
#search_widget .search-btn{
  background:var(--verde);color:#fff;border:1px solid var(--verde);
  min-height:var(--fila);min-width:var(--fila);
}
#search_widget .search-btn:hover{background:var(--verde-hover);border-color:var(--verde-hover)}

/* --- acceso de cliente: discreto, no es una tienda con carrito --- */
#user_info a{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-55);--ft-enlace:var(--tinta-55);text-decoration:none;
}
#user_info a:hover{color:var(--verde);--ft-enlace:var(--verde)}

/* --- mega menu: papel con filete, no una barra negra --- */
#iqitmegamenu-wrapper,
.iqit-megamenu-container,
#iqitmegamenu-horizontal{background:var(--papel) !important;border-block:1px solid var(--linea-fuerte)}
#cbp-hrmenu > ul > li > a,
.cbp-tabs-basic > li > a,
#iqitmegamenu-horizontal a{
  font-family:var(--mono) !important;font-size:var(--t-micro) !important;
  letter-spacing:.18em !important;text-transform:uppercase !important;
  color:var(--tinta-70) !important;background:transparent !important;
}
#cbp-hrmenu > ul > li > a:hover,
#cbp-hrmenu > ul > li.cbp-hropen > a{color:var(--verde) !important;background:transparent !important}
#cbp-hrmenu > ul > li{border-right:1px solid var(--linea)}
#cbp-hrmenu > ul > li:first-child{border-left:1px solid var(--linea)}

/* --- bloque de precio dentro de la ficha --- */
.ft-precio-ficha{margin-top:var(--e5)}
.ft-precio-ficha .valor{font-size:var(--t-h4)}
.ft-pie-ficha{display:flex;flex-direction:column;gap:var(--e2);margin-top:var(--e4);max-width:none}

/* la barra fija de movil no debe tapar el pie */
@media(max-width:767px){
  #footer,.ft-pie{padding-bottom:calc(var(--e6) + 56px)}
}

/* la franja de copyright del tema lleva iconos de tarjetas de pago:
   esta tienda no cobra online, asi que anunciar Visa y Mastercard es enganoso */
#footer-copyrights{display:none !important}

/* =============================================================================
   NAVEGACION PROPIA (hook displayMainMenu)
   Cinco entradas y un desplegable de tres familias. Sin JS: se abre con :hover
   y con :focus-within, en 0 ms. Un menu que tarda 200 ms se percibe como lento.
   ========================================================================== */
.ft-nav{background:var(--papel);border-block:1px solid var(--linea-fuerte);position:relative;z-index:30}
.ft-nav-lista{display:flex;flex-wrap:wrap;align-items:stretch;margin:0;padding:0;list-style:none}
.ft-nav-lista > li{display:flex;border-right:1px solid var(--linea)}
.ft-nav-lista > li:first-child{border-left:1px solid var(--linea)}
.ft-nav-lista > li > a{
  display:flex;align-items:center;min-height:var(--fila);padding:0 var(--e5);
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-70);--ft-enlace:var(--tinta-70);text-decoration:none;
  transition:color .12s linear,background .12s linear;
}
.ft-nav-lista > li > a:hover,
.ft-nav-lista > li:focus-within > a{color:var(--verde);--ft-enlace:var(--verde);background:var(--hoja)}
.ft-nav-cta{margin-left:auto;border-right:0 !important}
.ft-nav-cta > a{background:var(--verde);color:#fff !important}
.ft-nav-cta > a:hover{background:var(--verde-hover) !important;color:#fff !important}

.ft-nav-desp{position:static}
.ft-nav-panel{
  position:absolute;left:0;right:0;top:100%;display:none;
  background:var(--hoja);border:1px solid var(--linea-fuerte);border-top:0;
}
.ft-nav-desp:hover .ft-nav-panel,
.ft-nav-desp:focus-within .ft-nav-panel{display:block}
.ft-nav-panel > ul{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);margin:0;padding:0;list-style:none}
.ft-nav-panel > ul > li{background:var(--hoja)}
.ft-nav-panel a{
  display:flex;flex-direction:column;gap:6px;padding:var(--e5);text-decoration:none;--ft-enlace:var(--tinta);
  border-left:2px solid transparent;transition:background .12s linear,border-color .12s linear;
}
.ft-nav-panel a:hover{background:var(--papel);border-left-color:var(--verde)}
.ft-nav-n{font-family:var(--disp);font-weight:600;font-size:26px;line-height:1;color:var(--verde);font-variant-numeric:tabular-nums}
.ft-nav-t{font-family:var(--disp);font-weight:600;font-size:var(--t-h4);color:var(--tinta);letter-spacing:-.01em}
.ft-nav-d{font-size:var(--t-dato);color:var(--tinta-70)}
.ft-nav-pie{margin:0;padding:var(--e3) var(--e5);border-top:1px solid var(--linea);background:var(--papel)}

@media(max-width:900px){
  .ft-nav-lista{flex-direction:column}
  .ft-nav-lista > li{border-right:0;border-left:1px solid var(--linea);border-bottom:1px solid var(--linea)}
  .ft-nav-cta{margin-left:0}
  .ft-nav-panel{position:static;border:0;border-top:1px solid var(--linea)}
  .ft-nav-panel > ul{grid-template-columns:1fr}
}

/* =============================================================================
   PIE DOCUMENTAL (hook displayFooterAfter)
   ========================================================================== */
.ft-pie{border-top:1px solid var(--linea-fuerte);background:var(--papel);padding-block:var(--e8) var(--e6);margin-top:var(--e8)}
.ft-pie-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e7) var(--canal)}
.ft-pie-cols ul{margin:var(--e4) 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.ft-pie-cols li{border-top:1px solid var(--linea)}
.ft-pie-cols li a{display:block;padding:9px 0;font-size:var(--t-dato);color:var(--tinta-70);--ft-enlace:var(--tinta-70);text-decoration:none}
.ft-pie-cols li a:hover{color:var(--verde);--ft-enlace:var(--verde)}
.ft-pie-contacto{display:flex;flex-direction:column;gap:var(--e3)}
.ft-pie-tel{
  font-family:var(--disp);font-weight:600;font-size:clamp(22px,2.2vw,30px);
  letter-spacing:-.03em;color:var(--tinta);--ft-enlace:var(--tinta);text-decoration:none;
  font-variant-numeric:tabular-nums;margin-top:var(--e3);
}
.ft-pie-tel:hover{color:var(--verde);--ft-enlace:var(--verde)}
.ft-pie-contacto address{font-style:normal;color:var(--tinta-70);font-size:var(--t-dato);line-height:1.7}
.ft-pie-mail{font-size:var(--t-dato);color:var(--verde);--ft-enlace:var(--verde);word-break:break-all}
.ft-pie .ft-firma{margin-top:var(--e8);padding-top:var(--e5);border-top:1px solid var(--linea);max-width:none}
@media(max-width:900px){.ft-pie-cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ft-pie-cols{grid-template-columns:1fr}}

/* el pie propio sustituye al del tema: fuera redes sociales y boletin */
.block-social-links,.block-newsletter,#footer .block-social{display:none !important}

.footer-container,#footer{background:var(--papel);border-top:1px solid var(--linea-fuerte);color:var(--tinta-70)}
.ft-firma{
  font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.02em;
  text-transform:none;color:var(--tinta-55);line-height:1.7;opacity:.72;
}
.ft-legal{margin-top:var(--e8);padding-top:var(--e5);border-top:1px solid var(--linea)}
.ft-legal>summary{cursor:pointer;list-style:none;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-55);opacity:.7}
.ft-legal>summary::-webkit-details-marker{display:none}
.ft-legal>summary::after{content:" +";opacity:.6}
.ft-legal[open]>summary::after{content:" –"}
.ft-legal>summary:hover{opacity:1}
.ft-pie .ft-legal .ft-firma{margin-top:10px;padding-top:0;border-top:none}


/* -----------------------------------------------------------------------------
   16. MOVIL — barra fija inferior con las dos acciones que importan
   -------------------------------------------------------------------------- */
.ft-barra-movil{display:none}
@media(max-width:767px){
  .ft-barra-movil{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linea-banda);
    position:fixed;inset:auto 0 0 0;z-index:1030;
    padding-bottom:env(safe-area-inset-bottom);
    border-top:1px solid var(--linea-banda);
  }
  .ft-barra-movil a{
    background:var(--banda);color:var(--papel);--ft-enlace:var(--papel);text-decoration:none;
    min-height:56px;display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-weight:500;font-size:var(--t-dato);letter-spacing:.12em;text-transform:uppercase;
  }
  .ft-barra-movil a:last-child{background:var(--verde)}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  /* el hero lleva el texto SOBRE papel y la imagen DEBAJO, nunca texto sobre foto */
  .ft-hero{display:flex;flex-direction:column}
  .ft-hero__media{order:2;margin-top:var(--e5)}
}


/* -----------------------------------------------------------------------------
   17. MOVIMIENTO — un solo gesto de entrada, tres microtransiciones
   IntersectionObserver propio. Sin GSAP, sin AOS, sin Lenis, sin smooth scroll.
   El estado oculto (.ft-oculto) lo pone el JS y SOLO a lo que esta por debajo
   del pliegue al cargar. Si el JS falla, el contenido se ve igualmente.
   -------------------------------------------------------------------------- */
/* El contenido se ve SIEMPRE por defecto. El estado oculto lo pone el JS y solo
   a lo que esta por debajo del pliegue al cargar. Si el JS falla, no pasa nada. */
[data-entra]{
  transition:opacity .48s var(--curva),transform .48s var(--curva);
  transition-delay:calc(var(--i,0)*70ms);
}
[data-entra].ft-oculto{opacity:0;transform:translateY(16px);transition:none}
/* cabecera compacta al pasar 120 px */
.ft-compacta .header-top{transform:translateY(-100%);transition:transform .16s var(--curva)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  [data-entra],[data-entra].ft-oculto{opacity:1 !important;transform:none !important}
}


/* -----------------------------------------------------------------------------
   18. IMPRESION — el comprador guarda la ficha y las condiciones en PDF
   -------------------------------------------------------------------------- */
@media print{
  :root{
    --papel:#fff;--hoja:#fff;--banda:#fff;--tinta:#000;--tinta-70:#333;
    --tinta-55:#555;--linea:#bbb;--linea-fuerte:#888;--linea-banda:#bbb;
  }
  body{background:#fff;color:#000;font-size:11pt;padding-bottom:0}
  #header,.footer-container .block-social,.ft-barra-movil,.ft-saltar,
  .btn,.ft-acciones,#back-to-top,.iqitmegamenu-wrapper,
  .product-images-modal,.js-mailalert{display:none !important}
  .ft-banda,.ft-banda *{background:#fff !important;color:#000 !important}
  [data-entra],[data-entra].ft-oculto{opacity:1 !important;transform:none !important}
  .product-features .data-sheet > dt,.product-features .data-sheet > dd,
  .ft-tabla > dt,.ft-tabla > dd,.ft-listado .fila{break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
  a[href^="#"]::after,a[href^="tel"]::after,a[href^="mailto"]::after{content:""}
  #footer::after{
    content:"Fornituras Textiles · Jose Manuel Pallares Urruela · NIF 14572603X · Plaza Santi Brouard 3, 48960 Galdakao (Bizkaia) · 684 816 944";
    display:block;margin-top:8pt;font-family:var(--mono);font-size:8pt;letter-spacing:.12em;
  }
}


/* -----------------------------------------------------------------------------
   20. PORTADA — documento numerado: un H1 y diez H2
   El numero de seccion lo pone un contador CSS. Consecuencia editorial:
   si una seccion no aporta un dato verificable, no se numera: se borra.
   -------------------------------------------------------------------------- */
.ft-doc{counter-reset:ftsec}
.ft-doc > section{counter-increment:ftsec;padding-block:clamp(56px,8vw,128px)}
.ft-doc > section > .ft-env > h2::before{
  content:counter(ftsec,decimal-leading-zero) " / 10";
  display:block;width:max-content;
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-55);
  margin-bottom:var(--e3);padding-top:var(--e3);
  border-top:3px solid var(--rojo);
}
.ft-banda > .ft-env > h2::before{border-top-color:var(--verde-claro);color:#A9B5AF}
.ft-doc > section > .ft-env > h2{font-size:clamp(30px,4.3vw,56px)}
.ft-entradilla{margin-top:var(--e5);max-width:62ch;color:var(--tinta-70)}
.ft-banda .ft-entradilla{color:#C3CFC9}

/* hero */
.ft-hero{padding-block:clamp(46px,8vw,96px) clamp(38px,6vw,74px)}
.ft-hero h1{margin-top:var(--e5);max-width:15ch}
.ft-sub{margin-top:var(--e5);max-width:52ch;font-size:var(--t-h4);color:#4A554F}
.ft-acciones{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e6);align-items:center}

/* franja de datos duros */
.ft-datos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);
  border-block:1px solid var(--linea-fuerte);margin:0;
}
.ft-datos > div{background:var(--papel);padding:var(--e5) var(--margen)}
.ft-datos dt{margin:0}
.ft-datos dd{
  margin:var(--e3) 0 0;font-family:var(--disp);font-weight:600;
  font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.ft-datos small{display:block;margin-top:var(--e2);font-size:12.5px;color:var(--tinta-55);line-height:1.5}

/* familias */
.ft-familias{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea-fuerte);margin-top:var(--e7)}
.ft-familias > article{background:var(--hoja);padding:var(--e5);display:flex;flex-direction:column}
.ft-familias h3{margin-top:var(--e3);font-weight:700}
.ft-familias .ft-cuenta{
  font-family:var(--disp);font-weight:600;font-size:clamp(30px,3vw,40px);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--verde);
}
.ft-familias p{margin-top:var(--e3);color:var(--tinta-70);font-size:var(--t-dato)}
.ft-familias ul{margin-top:var(--e4);display:flex;flex-direction:column}
.ft-familias li{border-top:1px solid var(--linea);padding:9px 0;font-size:var(--t-dato);color:var(--tinta-70)}
.ft-mas{
  margin-top:auto;padding-top:var(--e5);align-self:flex-start;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;color:var(--verde);--ft-enlace:var(--verde);
  border-bottom:1px solid var(--verde);
}

/* sectores: rejilla tipografica, cero iconos */
.ft-sectores{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea-fuerte);margin-top:var(--e7)}
.ft-sectores > article{
  background:var(--hoja);padding:var(--e5) var(--e4);display:flex;flex-direction:column;gap:var(--e3);
  border-left:2px solid transparent;transition:background .12s linear,border-color .12s linear;
}
.ft-sectores > article:hover{background:var(--papel);border-left-color:var(--verde)}
.ft-sectores h3{font-size:var(--t-h4);font-weight:600}
.ft-sectores p{color:var(--tinta-70);font-size:var(--t-dato)}
.ft-sectores ul{display:flex;flex-direction:column;margin-top:auto;padding-top:var(--e3)}
.ft-sectores li{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-55);border-top:1px solid var(--linea);padding:7px 0;
}

/* montaje: imagen fija + anotaciones (el unico efecto protagonista) */
.ft-montaje{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--canal);row-gap:var(--e6);margin-top:var(--e7)}
.ft-med{grid-column:1 / span 6;margin:0;position:sticky;top:var(--e5);
  border:1px solid var(--linea-fuerte);background:var(--hoja)}
.ft-med figcaption{border-top:1px solid var(--linea);padding:var(--e3) var(--e4);
  display:flex;justify-content:space-between;gap:var(--e4);flex-wrap:wrap}
.ft-anota{grid-column:8 / span 5;display:grid;gap:1px;background:var(--linea);
  border:1px solid var(--linea-fuerte);align-self:start}
.ft-anota li{background:var(--hoja);padding:var(--e4);display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--e4);min-height:var(--fila)}
.ft-anota b{font-weight:500;font-variant-numeric:tabular-nums;font-size:var(--t-dato)}
.ft-pend{color:var(--rojo);font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.1em;font-weight:400}

/* pasos del pedido: aqui el orden SI es informacion */
.ft-pasos{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--e7);
  border-top:1px solid var(--linea-fuerte)}
.ft-paso{padding:var(--e5) clamp(14px,2.5vw,40px) 0 0;position:relative}
.ft-paso::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;
  background:var(--papel);border:1px solid var(--rojo)}
.ft-paso em{font-family:var(--mono);font-style:normal;font-size:var(--t-micro);
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-55);display:block;margin-bottom:var(--e2)}
.ft-paso h3{font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:0}
.ft-paso p{margin-top:var(--e2);font-size:var(--t-dato);color:var(--tinta-70);max-width:30ch}

/* fotografia */
.ft-foto-ancha,.ft-foto-banda{margin:var(--e7) 0 0;border:1px solid var(--linea-fuerte);background:var(--hoja)}
/* Las tres fotos llevan width y height en el HTML para reservar su hueco y que
   la pagina no salte al cargar. Sin esto, en movil conservan ese ancho fijo
   (760, 900 y 1100 px) y la portada mide 1126 px en una pantalla de 390. */
.ft-med img,.ft-foto-ancha img,.ft-foto-banda img{display:block;width:100%;max-width:100%;height:auto}
.ft-foto-ancha figcaption,.ft-foto-banda figcaption{padding:var(--e3) var(--e4);border-top:1px solid var(--linea)}
.ft-banda .ft-foto-banda{background:transparent}

/* precio */
.ft-precio{margin-top:var(--e7)}

/* prueba de existencia (banda oscura 1) */
.ft-prueba{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea-banda);
  border:1px solid var(--linea-banda);margin-top:var(--e7)}
.ft-prueba > div{background:var(--banda);padding:var(--e5) var(--e4);display:flex;flex-direction:column;gap:var(--e3)}
.ft-prueba strong{font-family:var(--disp);font-weight:600;font-size:var(--t-h4);color:var(--papel)}
.ft-prueba p{color:#C3CFC9;font-size:var(--t-dato)}

/* cierre (banda oscura 2) */
.ft-cierre{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,5vw,80px);
  align-items:end;margin-top:var(--e6)}
.ft-tel{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.4vw,40px);
  letter-spacing:-.03em;color:var(--papel);--ft-enlace:var(--papel);text-decoration:none;
  font-variant-numeric:tabular-nums;display:block;margin-top:var(--e3)}
.ft-tel:hover{color:var(--verde-claro);--ft-enlace:var(--verde-claro)}
.ft-cierre address{font-style:normal;color:#C3CFC9;font-size:var(--t-dato);line-height:1.7;margin-top:var(--e4)}

@media(max-width:1000px){
  .ft-datos{grid-template-columns:repeat(2,1fr)}
  .ft-familias,.ft-sectores{grid-template-columns:1fr}
  .ft-pasos{grid-template-columns:repeat(2,1fr);row-gap:var(--e6)}
  .ft-prueba,.ft-cierre{grid-template-columns:1fr}
  .ft-med,.ft-anota{grid-column:1 / -1}
  .ft-med{position:static}
}
@media(max-width:600px){
  .ft-datos{grid-template-columns:1fr}
  .ft-pasos{grid-template-columns:1fr}
  .ft-hero h1{max-width:none}
}


/* -----------------------------------------------------------------------------
   19. APAGADOS — lo que el tema trae y aqui no se usa
   Tienda en modo catalogo: sin carrito, sin precio publico, sin redes de moda.
   -------------------------------------------------------------------------- */
#blockcart-wrapper,.blockcart,.header-cart,
#_desktop_cart,#_mobile_cart,
.product-add-to-cart,.js-product-refresh .add-to-cart,
.product-comments-additional-info,
.social-sharing,.js-social-share,
#iqitcountdown,.product-flags .discount,
.tax-shipping-delivery-label{display:none !important}


/* -----------------------------------------------------------------------------
   20. SOLICITUD DE PRESUPUESTO — el impreso
   Toda la web termina aqui. Se trata como lo que es: un impreso de alta de
   proveedor, no un formulario de contacto. Campos anchos, rotulo encima,
   ayuda debajo, y el error escrito en castellano y no en rojo a secas.
   Modulo ftpresupuesto, plantilla front/solicitud.tpl.
   -------------------------------------------------------------------------- */

/* --- cabecera ------------------------------------------------------------- */
.ft-solicitud-cab{padding-top:var(--e8);padding-bottom:var(--e6);border-bottom:1px solid var(--linea)}
.ft-solicitud-cab h1{margin:var(--e3) 0 0;max-width:22ch}
.ft-entrada{font-size:var(--t-h4);line-height:1.55;color:var(--tinta-70);
  max-width:62ch;margin:var(--e4) 0 0}
.ft-nota{font-size:var(--t-dato);color:var(--tinta-55);margin:var(--e3) 0 0}
.ft-nota a{color:var(--verde);--ft-enlace:var(--verde);font-weight:600}

/* --- reticula de la pagina ------------------------------------------------ */
.ft-solicitud-cuerpo{padding-top:var(--e7);padding-bottom:var(--e9)}
.ft-solicitud-cuerpo > .ft-env{display:grid;grid-template-columns:minmax(0,1fr) 320px;
  column-gap:var(--e8);align-items:start}
.ft-solicitud-cuerpo > .ft-env > .ft-aviso-error{grid-column:1 / -1}

/* --- aviso de errores ----------------------------------------------------- */
.ft-aviso-error{border:1px solid var(--rojo);border-left-width:3px;background:var(--hoja);
  padding:var(--e4) var(--e5);margin-bottom:var(--e6)}
.ft-aviso-error .ft-rot{color:var(--rojo);display:block}
.ft-aviso-error p{margin:var(--e2) 0 0;font-size:var(--t-dato)}

/* --- bloques del impreso -------------------------------------------------- */
.ft-form-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--linea);border:1px solid var(--linea)}
.ft-bloque{background:var(--hoja);padding:var(--e5);margin:0;border:0;min-width:0}
.ft-bloque-ancho{grid-column:1 / -1}
.ft-bloque legend{font-family:var(--disp);font-weight:600;font-size:var(--t-h4);
  color:var(--tinta);float:left;width:100%;padding:0;margin:0 0 var(--e4);
  display:flex;align-items:baseline;gap:var(--e3);border:0}
/* La leyenda flota para salir del borde del fieldset: si no, Chrome la dibuja
   montada sobre la linea superior y el fondo blanco del bloque empieza a media
   altura de la leyenda, dejando una franja gris encima (visto en movil el
   10/09/2026). Es lo mismo que hace Bootstrap; el clear devuelve el flujo. */
.ft-bloque legend + *{clear:left}
.ft-bloque legend .ft-num{font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.14em;color:var(--verde)}

/* --- campo ---------------------------------------------------------------- */
.ft-campo{margin-top:var(--e4)}
.ft-campo:first-of-type{margin-top:0}
.ft-campo label{display:block;font-family:var(--mono);font-weight:500;
  font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--tinta-55);margin-bottom:var(--e2)}
.ft-campo abbr{color:var(--verde);text-decoration:none;border:0;margin-left:.35em}

.ft-campo input[type=text],
.ft-campo input[type=email],
.ft-campo input[type=tel],
.ft-campo select,
.ft-campo textarea{
  width:100%;display:block;background:var(--papel);color:var(--tinta);
  border:1px solid var(--borde-campo);padding:11px 12px;
  font-family:var(--sans);font-size:var(--t-texto);line-height:1.4;
  transition:border-color .14s var(--curva),box-shadow .14s var(--curva);
  appearance:none;-webkit-appearance:none;
}
.ft-campo textarea{resize:vertical;min-height:9em;line-height:1.55;
  font-variant-numeric:tabular-nums}
.ft-campo select{
  background-image:linear-gradient(45deg,transparent 50%,var(--tinta-70) 50%),
                   linear-gradient(135deg,var(--tinta-70) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:36px;
}
.ft-campo input:focus-visible,
.ft-campo select:focus-visible,
.ft-campo textarea:focus-visible{
  outline:0;border-color:var(--verde);box-shadow:inset 0 0 0 1px var(--verde);
}
.ft-campo input::placeholder,
.ft-campo textarea::placeholder{color:var(--tinta-55);opacity:1}

.ft-campo input[type=file]{width:100%;font-family:var(--sans);font-size:var(--t-dato);
  color:var(--tinta-70);border:1px dashed var(--borde-campo);background:var(--papel);
  padding:11px 12px;cursor:pointer}
.ft-campo input[type=file]::file-selector-button{
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;background:var(--tinta);color:var(--papel);
  border:0;padding:8px 14px;margin-right:var(--e3);cursor:pointer}
.ft-campo input[type=file]:hover::file-selector-button{background:var(--verde)}

.ft-ayuda{font-size:var(--t-dato);line-height:1.5;color:var(--tinta-55);margin:var(--e2) 0 0}
.ft-error{font-size:var(--t-dato);line-height:1.5;color:var(--rojo);font-weight:600;
  margin:var(--e2) 0 0}
.ft-error::before{content:"— ";font-weight:400}

/* El error se marca con color Y con un filete grueso: quien no distingue el
   rojo tiene que poder localizar el campo igual. */
.ft-campo.mal input,
.ft-campo.mal select,
.ft-campo.mal textarea{border-color:var(--rojo);border-left-width:3px}

.ft-campo-par{display:grid;grid-template-columns:1fr 150px;gap:var(--e4);margin-top:var(--e4)}
.ft-campo-par .ft-campo{margin-top:0}

/* La trampa de miel: fuera de pantalla, no display:none — hay robots que
   descartan los campos ocultos con display. */
.ft-trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* --- cierre del impreso --------------------------------------------------- */
.ft-form-cierre{border:1px solid var(--linea);border-top:0;background:var(--hoja);
  padding:var(--e5)}
.ft-campo-rgpd{display:grid;grid-template-columns:22px 1fr;gap:var(--e3);align-items:start}
.ft-campo-rgpd input[type=checkbox]{width:20px;height:20px;margin:2px 0 0;
  accent-color:var(--verde);border:1px solid var(--borde-campo);cursor:pointer}
.ft-campo-rgpd label{font-family:var(--sans);font-size:var(--t-dato);line-height:1.55;
  color:var(--tinta-70);text-transform:none;letter-spacing:0;margin:0;cursor:pointer}
.ft-campo-rgpd a{color:var(--verde);--ft-enlace:var(--verde);font-weight:600;text-underline-offset:3px}
.ft-campo-rgpd .ft-error{grid-column:2}
.ft-campo-rgpd.mal input[type=checkbox]{outline:2px solid var(--rojo);outline-offset:2px}

.ft-form-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e5);
  margin-top:var(--e5);padding-top:var(--e5);border-top:1px solid var(--linea)}
.ft-enviar{font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;background:var(--verde);color:#fff;
  border:0;padding:16px 32px;cursor:pointer;transition:background .14s var(--curva)}
.ft-enviar:hover{background:var(--verde-hover);color:#fff}
.ft-form-acciones .ft-nota{margin:0}

/* --- columna lateral ------------------------------------------------------ */
.ft-solicitud-lado{background:var(--banda);color:var(--papel);padding:var(--e5);
  position:sticky;top:var(--e5)}
.ft-solicitud-lado .ft-rot{color:var(--verde-claro);display:block}
.ft-solicitud-lado ol{list-style:none;counter-reset:ftp;margin:var(--e4) 0 0;padding:0}
.ft-solicitud-lado li{counter-increment:ftp;position:relative;padding-left:30px;
  margin-top:var(--e4);font-size:var(--t-dato);line-height:1.6;color:#C3CFC9}
.ft-solicitud-lado li:first-child{margin-top:0}
.ft-solicitud-lado li::before{content:counter(ftp,decimal-leading-zero);
  position:absolute;left:0;top:.1em;font-family:var(--mono);font-weight:500;
  font-size:var(--t-micro);letter-spacing:.1em;color:var(--verde-claro)}
.ft-solicitud-lado strong{color:var(--papel);font-weight:600}
.ft-solicitud-lado .ft-nota{color:#A9B5AF;border-top:1px solid var(--linea-banda);
  padding-top:var(--e4);margin-top:var(--e5)}

/* --- acuse de recibo ------------------------------------------------------ */
.ft-recibido{padding-top:var(--e8);padding-bottom:var(--e9)}
.ft-recibido h1{margin:var(--e3) 0 0;max-width:20ch}
.ft-recibido .ft-rot{color:var(--verde)}
.ft-recibido-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 320px;
  column-gap:var(--e8);align-items:start;margin-top:var(--e7);
  border-top:1px solid var(--linea);padding-top:var(--e6)}
.ft-pasos-recibido{list-style:none;margin:var(--e6) 0 0;padding:0;
  display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.ft-pasos-recibido li{background:var(--hoja);padding:var(--e4) var(--e5)}
.ft-pasos-recibido p{margin:var(--e2) 0 0;font-size:var(--t-dato);
  line-height:1.6;color:var(--tinta-70)}
.ft-recibido-lado{background:var(--banda);color:var(--papel);padding:var(--e5)}
.ft-recibido-lado .ft-rot{color:var(--verde-claro);display:block}
.ft-recibido-lado p{font-size:var(--t-dato);line-height:1.6;color:#C3CFC9;margin:var(--e4) 0 0}
.ft-recibido-lado .ft-nota{color:#A9B5AF;border-top:1px solid var(--linea-banda);
  padding-top:var(--e4);margin-top:var(--e5)}
.ft-recibido-lado strong{color:var(--verde-claro);font-variant-numeric:tabular-nums}
.ft-tel-grande{display:block;margin-top:var(--e3);font-family:var(--disp);font-weight:600;
  font-size:clamp(24px,3vw,35px);letter-spacing:-.03em;color:var(--papel);--ft-enlace:var(--papel);
  text-decoration:none;font-variant-numeric:tabular-nums}
.ft-tel-grande:hover{color:var(--verde-claro);--ft-enlace:var(--verde-claro)}
.ft-volver{display:flex;flex-wrap:wrap;gap:var(--e5);margin-top:var(--e7);
  padding-top:var(--e5);border-top:1px solid var(--linea)}
.ft-volver a{font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--verde);--ft-enlace:var(--verde)}

/* --- adaptacion ----------------------------------------------------------- */
@media(max-width:1000px){
  .ft-solicitud-cuerpo > .ft-env,
  .ft-recibido-cuerpo{grid-template-columns:1fr}
  .ft-solicitud-lado{position:static;margin-top:var(--e6)}
  .ft-recibido-lado{margin-top:var(--e6)}
}
@media(max-width:700px){
  .ft-form-rejilla{grid-template-columns:1fr}
  .ft-campo-par{grid-template-columns:1fr}
  .ft-form-acciones{gap:var(--e4)}
  .ft-enviar{width:100%}
}

/* -----------------------------------------------------------------------------
   21. CAPA ACTUAL — la web se mueve como una aplicacion, sin efectos de feria
   Integrada el 10/09/2026.
   Tres gestos. Los tres son opcionales para el navegador: si no los entiende,
   la web funciona exactamente igual. Los tres se apagan con
   prefers-reduced-motion (quien ha pedido menos movimiento no ve ninguno).
   -------------------------------------------------------------------------- */

/* 1. Transicion entre paginas (View Transitions entre documentos).
   Chrome/Edge 126+ y Safari 18.2+; el resto navega como siempre.
   La cabecera tiene nombre propio: no entra en el fundido, se queda quieta y
   solo cambia lo de debajo. Es lo que hace que se perciba como una aplicacion
   y no como una web de 2012 que parpadea en blanco a cada clic. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}

  ::view-transition-old(root),
  ::view-transition-new(root){animation-duration:.22s;animation-timing-function:var(--curva)}
  ::view-transition-old(root){animation-name:ft-vt-sale}
  ::view-transition-new(root){animation-name:ft-vt-entra}

  #header{view-transition-name:ft-cabecera}
  ::view-transition-group(ft-cabecera){animation-duration:0s}

  /* La foto de la tarjeta pulsada (la nombra fornituras.js al hacer clic)
     crece hasta la foto principal de la ficha. La diapositiva seleccionada
     lleva una sola <img> (comprobado en el HTML real): nombre unico.
     Si se sale de una ficha pulsando un producto relacionado, fornituras.js
     pone .ft-vt-tarjeta en <html> y esta regla deja de aplicarse, para que
     no haya dos 'ft-foto' en la misma pagina (el navegador cancelaria). */
  html:not(.ft-vt-tarjeta) #product-images-large .product-lmage-large.js-thumb-selected img{view-transition-name:ft-foto}
  ::view-transition-group(ft-foto){animation-duration:.34s;animation-timing-function:var(--curva)}
}
@keyframes ft-vt-sale{to{opacity:0}}
@keyframes ft-vt-entra{from{opacity:0;transform:translateY(6px)}}

/* 2. Progreso de lectura: un filete verde de 2 px arriba del todo que crece
   con el scroll. Encaja con la hoja tecnica (es una regla que avanza) y en
   una portada de 18.000 px de alto en movil dice cuanto queda.
   Solo con animation-timeline (Chrome 115+, Safari 26+); lo crea
   fornituras.js y solo en paginas de mas de dos pantallas y media. */
.ft-progreso{display:none}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .ft-progreso{
      display:block;position:fixed;inset:0 0 auto 0;height:2px;z-index:1100;
      background:var(--verde);transform-origin:0 50%;transform:scaleX(0);
      pointer-events:none;
      animation:ft-progreso linear both;animation-timeline:scroll(root block);
    }
  }
}
@keyframes ft-progreso{to{transform:scaleX(1)}}

/* 3. Tipografia de parrafo: el navegador evita la ultima linea de una sola
   palabra (viuda). Donde no lo entiende, no hace nada. */
p,li,dd,figcaption{text-wrap:pretty}


/* -----------------------------------------------------------------------------
   22. MENU MOVIL - el panel que abre el boton "Menu" de la cabecera movil
   Sin numero a proposito: el 21 lo piden a la vez esta tarea, la del listado
   y la de paginas de estado. Al pegarla se le pone el siguiente numero libre;
   comprobar.sh la busca por el titulo, no por el numero.
   Marcado: ftassets/views/templates/hook/nav-movil.tpl (hook displayMainMenu).
   Por debajo de 992 px responsive.js de Warehouse mueve #ft-menu-movil de
   #_desktop_iqitmegamenu-mobile a #_mobile_iqitmegamenu-mobile, que es el
   .dropdown-menu que abre el boton (variante "push", .col-mobile-menu-push).
   Lo abre y lo cierra el dropdown de Bootstrap 5.3 del tema; el JS propio
   (fornituras.js, bloque MENU MOVIL) solo arregla teclado y foco.

   Todo lo visual cuelga de clases ft-mm-*. Las js-mobile-menu__* estan solo
   por el contrato con MobileMenu.js. Las mobile-menu__* del tema NO se usan a
   proposito: el editor de Warehouse (custom_s_1.css) les pone grises y tamanos
   que no son de esta paleta (#595050, #f4f4f4, 1,57 rem).

   Colores de enlace segun la seccion 7b: cada regla que da color a un enlace
   fija tambien --ft-enlace con el mismo valor. Sin eso, la regla general de
   enlaces (0,3,1) gana a estas (0,1,1) y todo el panel saldria en verde.

   Sin transicion: la seccion 15 ya deja "#header .dropdown-menu" en 0 ms, la
   misma decision que en el desplegable de escritorio.
   -------------------------------------------------------------------------- */

/* En escritorio no existe. El tema ya lo oculta; se repite por si una
   actualizacion de Warehouse retira su regla. */
#_desktop_iqitmegamenu-mobile{display:none !important}


/* --- botones de la cabecera movil: Menu, Buscar, Cuenta ------------------- */
/* El tema les pone outline:0 y sin esto el foco de teclado no se ve.
   El gris #777 del editor del tema pasa a la paleta. */
#mobile-header .m-nav-btn{color:var(--tinta-70);--ft-enlace:var(--tinta-70)}
#mobile-header .m-nav-btn:hover,
#mobile-header .m-nav-btn.show{color:var(--verde);--ft-enlace:var(--verde)}
#mobile-header .m-nav-btn:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}


/* --- contenedor del panel -------------------------------------------------- */
.col-mobile-menu-push #_mobile_iqitmegamenu-mobile{
  /* queda una franja de velo: se cierra tocando fuera. En px y no en rem
     (seccion 2): con el html a 12 px del tema, 26rem se quedaba en 312 px. */
  width:min(calc(100vw - var(--e7)),400px);
  height:100vh;height:100dvh;               /* sin dvh la regla del tema caia y quedaba height:0 */
  margin:0;                                 /* Bootstrap mete margin-top con [data-bs-popper] */
  overflow:hidden;                          /* el scroll lo lleva .ft-mm-cuerpo */
  transform:translate3d(-100%,0,0);
  /* Cerrado = invisible tambien para el tabulador y el lector de pantalla.
     El tema solo lo sacaba de la pantalla y el foco entraba en enlaces que
     no se ven. */
  visibility:hidden;
}
.col-mobile-menu-push #_mobile_iqitmegamenu-mobile.show{transform:none;visibility:visible}

/* Velo sobre la pagina: recoge el toque de fuera, que cierra, y evita que ese
   mismo toque active un enlace de debajo. El tema lo ata a .show en la
   columna padre, que Bootstrap 5 ya no pone; aqui se ata al boton. */
.col-mobile-menu-push .js-m-nav-btn-menu.show ~ #mobile_menu_click_overlay{
  position:fixed;inset:0;z-index:5004;
  background:var(--banda);opacity:.6;
}

/* #header es un contexto de apilamiento (z-index 100): la barra fija inferior
   (1030) y el boton de volver arriba (120) quedaban ENCIMA del panel abierto.
   Se sube solo mientras esta abierto, y la pagina de debajo no se desplaza.
   Dentro de la media: si el estado quedara colgado al pasar a escritorio, el
   scroll de escritorio no se bloquea. */
@media (max-width:991.98px){
  #header:has(#_mobile_iqitmegamenu-mobile.show){z-index:1040}
  html:has(#_mobile_iqitmegamenu-mobile.show){overflow:hidden}
}


/* --- panel ----------------------------------------------------------------- */
.ft-mm{
  display:flex;flex-direction:column;height:100%;
  background:var(--papel);color:var(--tinta);
  border-right:1px solid var(--linea-fuerte);
  font-family:var(--sans);font-size:var(--t-dato);line-height:1.45;
  text-align:left;letter-spacing:0;text-transform:none;
}
.ft-mm a,
.ft-mm a:hover,
.ft-mm a:focus{text-decoration:none}
/* El panel lleva tabindex="-1" solo para que un toque en zona vacia no mande
   el foco al body. No es un control: nunca recibe foco por teclado. */
.ft-mm:focus{outline:0}
/* dentro de un contenedor con scroll el anillo exterior se recorta: va hacia dentro */
.ft-mm :where(a,button):focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}

/* cabecera: rotulo y "Cerrar" */
.ft-mm-cab{
  flex:none;display:flex;align-items:stretch;justify-content:space-between;
  min-height:var(--fila);border-bottom:1px solid var(--linea-fuerte);
}
.ft-mm-cab > .ft-rot{display:flex;align-items:center;padding-left:var(--e4)}
.ft-mm-cerrar{
  display:inline-flex;align-items:center;gap:var(--e3);
  min-width:var(--fila);margin:0;padding:0 var(--e4);
  background:transparent;border:0;border-left:1px solid var(--linea);
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-70);
  cursor:pointer;
}
.ft-mm-cerrar:active{background:var(--hoja);color:var(--verde)}
@media (hover:hover){
  .ft-mm-cerrar:hover{background:var(--hoja);color:var(--verde)}
}
/* aspa de dos filetes de 1 px: sin fuente de iconos */
.ft-mm-aspa{position:relative;flex:none;width:14px;height:14px}
.ft-mm-aspa::before,
.ft-mm-aspa::after{
  content:"";position:absolute;left:-2px;right:-2px;top:50%;
  border-top:1px solid currentColor;transform:rotate(45deg);
}
.ft-mm-aspa::after{transform:rotate(-45deg)}

/* cuerpo: lleva el scroll, y el scroll no se contagia a la pagina */
.ft-mm-cuerpo{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:var(--e6);
}
.ft-mm-bloque{padding-top:var(--e5)}
.ft-mm-rot{display:block;margin:0;padding:0 var(--e4) var(--e3);line-height:1.5}
.ft-mm-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.ft-mm-lista > li{border-bottom:1px solid var(--linea)}
.ft-mm-lista a{
  position:relative;display:flex;align-items:center;gap:var(--e3);
  min-height:var(--fila);padding:var(--e3) var(--e4) var(--e3) calc(var(--e4) - 2px);
  border-left:2px solid transparent;color:var(--tinta);--ft-enlace:var(--tinta);
}
.ft-mm-lista a:active{background:var(--hoja);border-left-color:var(--verde);color:var(--verde);--ft-enlace:var(--verde)}
@media (hover:hover){
  .ft-mm-lista a:hover{background:var(--hoja);border-left-color:var(--verde);color:var(--verde);--ft-enlace:var(--verde)}
}
/* la pagina en la que se esta: el mismo rojo que marca lo activo en la cabecera */
.ft-mm-lista a[aria-current="page"]{background:var(--hoja);border-left-color:var(--rojo)}

/* familias: recuento, nombre y que lleva */
.ft-mm-lista a.ft-mm-fam{
  display:grid;grid-template-columns:36px minmax(0,1fr);
  column-gap:var(--e3);row-gap:2px;align-items:baseline;
}
.ft-mm-n{
  grid-row:1;grid-column:1;justify-self:end;
  font-family:var(--disp);font-weight:600;font-size:var(--t-h3);line-height:1;
  letter-spacing:-.02em;color:var(--verde);font-variant-numeric:tabular-nums;
}
.ft-mm-t{grid-row:1;grid-column:2;font-weight:600}
.ft-mm-d{grid-row:2;grid-column:2;color:var(--tinta-70)}
.ft-mm-quien{
  margin-left:auto;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-55);
}

/* pie fijo: las dos acciones que importan, siempre a mano (la misma idea que
   la barra inferior de la seccion 16) */
.ft-mm-pie{
  flex:none;background:var(--hoja);border-top:1px solid var(--linea-fuerte);
  padding:var(--e4) var(--e4) calc(var(--e2) + env(safe-area-inset-bottom));
}
/* Con el id delante: "#header a:hover" (seccion 15, 1,1,1) pesa mas que una
   clase y pintaria el texto de verde sobre el boton verde. */
#ft-menu-movil .ft-mm-cta{
  display:flex;align-items:center;justify-content:center;min-height:var(--fila);
  padding:var(--e2) var(--e5);background:var(--verde);border:1px solid var(--verde);
  color:#fff;--ft-enlace:#fff;
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;text-align:center;
}
#ft-menu-movil .ft-mm-cta:active{background:var(--verde-hover);border-color:var(--verde-hover);color:#fff;--ft-enlace:#fff}
@media (hover:hover){
  #ft-menu-movil .ft-mm-cta:hover{background:var(--verde-hover);border-color:var(--verde-hover);color:#fff;--ft-enlace:#fff}
}
/* anillo blanco por dentro: el de tinta no se distingue sobre el verde */
#ft-menu-movil .ft-mm-cta:focus-visible{outline:2px solid var(--hoja);outline-offset:-5px}
.ft-mm-plazo{margin:var(--e2) 0 0;max-width:none;text-align:center;line-height:1.6}
.ft-mm-tel{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  min-height:var(--fila);margin-top:var(--e3);border-top:1px solid var(--linea);
  color:var(--tinta);--ft-enlace:var(--tinta);
}
.ft-mm-tel:active{color:var(--verde);--ft-enlace:var(--verde)}
@media (hover:hover){
  .ft-mm-tel:hover{color:var(--verde);--ft-enlace:var(--verde)}
}
.ft-mm-num{
  font-family:var(--disp);font-weight:600;font-size:var(--t-h3);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}

/* movil apaisado: el pie deja de ser fijo y se desplaza todo el panel */
@media (max-height:560px){
  .ft-mm{overflow-y:auto;overscroll-behavior:contain}
  .ft-mm-cuerpo{flex:none;min-height:auto;overflow:visible}
}
/* =============================================================================
   23. LISTADO — familia (categoria) y resultados de busqueda
   -----------------------------------------------------------------------------
   Se pega al FINAL de tema-hijo/fornituras.css. No toca ninguna plantilla de
   Warehouse: todo cuelga del id del <body> o de <section id="products">, que
   envuelve la rejilla en categoria, busqueda, novedades y marca. La portada,
   la ficha y el pie no se enteran de nada.

   Hay DOS paginas de resultados de busqueda y las dos usan esta rejilla:
     #search                        /busqueda?s=...  (la del nucleo)
     #module-iqitsearch-searchiqit  /module/iqitsearch/searchiqit?s=...
                                    (la del buscador de la cabecera: es la que
                                    usa el visitante de verdad)
   Por eso toda regla de busqueda nombra los dos ids. :is() toma la
   especificidad de su argumento mas fuerte (un id), asi que no cambia nada.

   Marcado real (HTML descargado el 10/09/2026, cat3/cat4/cat5/busq1 e
   iqitsearch ?s=hilo):
     miniatura layout 1 -> article.product-miniature.product-miniature-grid
       .thumbnail-container > a.product-thumbnail > picture > img (x2, rollover)
       .product-description > .product-category-name, a.product-title,
                              .product-reference > a, .product-description-short,
                              .product-add-cart > a.btn-product-list ("View")

   Tres cosas que el tema hace y aqui se deshacen, y por que:
   1) custom_s_1.css (lo genera el editor del tema) oculta en la rejilla la
      referencia con display:none !important. Se vuelve a mostrar: en un
      catalogo de reposicion la referencia ES el dato, no un adorno. Ese mismo
      fichero ya oculta el boton "View": aqui se remata tambien en la vista de
      lista, que el tema deja abrir con su conmutador.
   2) theme.css pinta un spinner SVG animado de fondo en cada miniatura hasta
      que la carga diferida le pone .loaded. Si la foto da 404 esa clase no
      llega nunca y el spinner gira para siempre. vanilla-lazyload 17 marca el
      fallo con .error: con eso basta para dejar una caja de papel en calma.
   3) La segunda foto (rollover al pasar el raton) se apaga: es un gesto de
      escaparate y, hoy, una segunda peticion 404 por tarjeta.

   OJO con la regla 7b de esta hoja: "#wrapper a:not(.nav-link):not(.btn)"
   pesa (1,2,1) y gana a casi todo lo de esta seccion (1,2,0). Por eso cada
   regla que da color a un enlace fija tambien --ft-enlace con el mismo valor;
   sin eso el nombre de cada tarjeta y el selector de orden salian en verde.
   ========================================================================== */


/* --- 23.1 Migas y titulo -----------------------------------------------------
   Las migas del tema van en #8f8f8f: 2,99:1 sobre papel, no llega a AA.
   Se limitan a listado para no pisar a la ficha; se pueden subir a global. */
:is(#category,#search,#module-iqitsearch-searchiqit) #wrapper .breadcrumb{
  margin:0 0 var(--e5);padding:var(--e4) 0 0;
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-55);
}
:is(#category,#search,#module-iqitsearch-searchiqit) #wrapper .breadcrumb a{
  color:var(--tinta-70);--ft-enlace:var(--tinta-70);text-decoration:none;opacity:1;
}
/* el tema baja la opacidad a .8 al pasar por encima */
:is(#category,#search,#module-iqitsearch-searchiqit) #wrapper .breadcrumb a:hover{
  color:var(--verde);--ft-enlace:var(--verde);opacity:1;
}
:is(#category,#search,#module-iqitsearch-searchiqit) #wrapper .breadcrumb li::after{opacity:1;color:var(--tinta-55);margin:0 .6em}

/* El H1 del listado lleva el mismo rotulo con filete rojo que las secciones
   de la portada ("01 / 10"): la familia se lee como un capitulo del mismo
   documento. El numero sale del id de categoria que PrestaShop pone en el body.
   El rotulo es adorno: con la sintaxis de texto alternativo (content:"x" / "")
   el lector de pantalla no lo lee dentro del H1. Cada regla lleva DOS
   declaraciones a proposito: el navegador que no entiende la segunda la
   descarta y se queda con la primera, que se ve igual. */
:is(#category,#search,#module-iqitsearch-searchiqit) #content-wrapper .page-title{
  margin:0 0 var(--e5);padding:0;border:0;text-align:left;text-transform:none;
  font-family:var(--disp);font-weight:600;font-size:var(--t-h2);
  letter-spacing:-.015em;line-height:1.1;color:var(--tinta);
}
:is(#category,#search,#module-iqitsearch-searchiqit) #content-wrapper .page-title::before{
  content:"Catálogo";content:"Catálogo" / "";
  display:block;width:max-content;position:static;
  margin-bottom:var(--e3);padding-top:var(--e3);border-top:3px solid var(--rojo);
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-55);
}
#category.category-id-3 #content-wrapper .page-title::before{content:"Familia 01";content:"Familia 01" / ""}
#category.category-id-4 #content-wrapper .page-title::before{content:"Familia 02";content:"Familia 02" / ""}
#category.category-id-5 #content-wrapper .page-title::before{content:"Familia 03";content:"Familia 03" / ""}
:is(#search,#module-iqitsearch-searchiqit) #content-wrapper .page-title::before{content:"Búsqueda";content:"Búsqueda" / ""}


/* --- 23.2 Franja de la familia (hook displayHeaderCategory, listado.tpl) ------
   Lo que la rejilla no dice: cuantas referencias hay, para quien son y como
   se pide el precio. La falta de precio se explica aqui UNA vez, en vez de
   dejar un hueco en cada tarjeta.
   Flex y no grid: en catalogo y en busqueda la franja lleva dos o tres celdas
   y con grid quedaria una celda vacia pintada de gris. */
.ft-franja{margin:0 0 var(--e6);border:1px solid var(--linea-fuerte);background:var(--hoja)}
.ft-franja-texto{padding:var(--e5);border-bottom:1px solid var(--linea)}
.ft-franja-texto p{margin:0;max-width:68ch;font-size:var(--t-texto);line-height:1.6;color:var(--tinta-70)}
.ft-franja-texto p + p{margin-top:var(--e3)}
.ft-franja-datos{display:flex;flex-wrap:wrap;gap:1px;background:var(--linea);margin:0}
.ft-franja-datos > div{
  flex:1 1 240px;min-width:0;background:var(--hoja);
  padding:var(--e4) var(--e5);display:flex;flex-direction:column;gap:var(--e2);
}
.ft-franja-datos > div:first-child{flex:0 0 150px}
.ft-franja-datos > .ft-franja-precio{flex:2 1 300px}
.ft-franja-datos dt{margin:0}
.ft-franja-datos dd{margin:0;font-size:var(--t-dato);line-height:1.5;color:var(--tinta-70)}
.ft-franja-datos .ft-franja-cifra{
  font-family:var(--disp);font-weight:600;font-size:clamp(30px,3vw,40px);
  letter-spacing:-.03em;line-height:1;color:var(--verde);font-variant-numeric:tabular-nums;
}
.ft-franja-datos .ft-franja-termino{
  font-family:var(--disp);font-weight:600;font-size:var(--t-h4);
  line-height:1.25;color:var(--tinta);overflow-wrap:anywhere;
}
.ft-franja-acciones{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e3)}
/* "Pedir presupuesto de esta familia" en mono con tracking mide unos 330 px:
   en un movil de 375 no cabe en una linea y el boton no debe desbordar. */
.ft-franja-acciones .btn{white-space:normal;text-align:center}
@media(max-width:575.98px){
  .ft-franja-datos > div,
  .ft-franja-datos > div:first-child,
  .ft-franja-datos > .ft-franja-precio{flex:1 1 100%}
  .ft-franja-acciones .btn{flex:1 1 100%}
}
/* Red por si alguien activa la descripcion del tema (hoy cat_desc = "0",
   oculta): la descripcion ya sale dentro de la franja y no debe salir dos veces. */
body:has(.ft-franja) .category-description{display:none}


/* --- 23.3 Barra de recuento y orden ------------------------------------------ */
#products .products-selection{
  margin:0 0 var(--e5);padding:var(--e2) 0;
  border-top:1px solid var(--linea-fuerte);border-bottom:1px solid var(--linea);
}
#products .products-selection > .row{margin:0;align-items:center}
/* una sola vista (rejilla): el conmutador rejilla/lista sobra, y la lista es
   donde el tema deja ver el boton "View" en ingles */
#products .products-selection .view-switcher,
#products .products-selection .facated-toggler:empty{display:none}
#products .products-selection .row > .col-auto:last-child{
  flex:1 1 auto;padding:0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--e3) var(--e5);
}
#products .products-selection .showing{
  margin:0;font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-55);
  font-variant-numeric:tabular-nums;
}
/* el tema lo esconde en movil; es el unico sitio donde el movil ve el total */
@media(max-width:767.98px){
  #products .products-selection .showing.hidden-sm-down{display:inline !important}
}

/* orden: control de formulario con su borde de 3,79:1, no un texto gris */
#products .products-sort-order{display:inline-flex;align-items:center;gap:var(--e3)}
#products .products-sort-order::before{
  content:"Ordenar";font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-55);
}
#products .products-sort-order .select-title{
  display:inline-flex;align-items:center;gap:var(--e3);
  min-height:var(--fila);padding:0 var(--e4);cursor:pointer;
  background:var(--hoja);border:1px solid var(--borde-campo);
  color:var(--tinta);--ft-enlace:var(--tinta);text-decoration:none;
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
}
#products .products-sort-order .select-title:hover,
#products .products-sort-order .select-title[aria-expanded="true"]{border-color:var(--verde);color:var(--verde);--ft-enlace:var(--verde)}
#products .products-sort-order .select-title-name{max-width:none;overflow:visible}
/* El menu se abre alineado a la DERECHA del boton. Bootstrap lo pega a la
   izquierda del bloque, que aqui empieza en el rotulo "Ordenar"; en la
   derecha de la barra eso lo sacaba medio menu fuera del boton. */
#products .products-sort-order .dropdown-menu{
  min-width:100%;margin-top:-1px;padding:0;left:auto;right:0;
  background:var(--hoja);border:1px solid var(--linea-fuerte);
}
#products .products-sort-order .dropdown-item{
  display:block;padding:12px var(--e4);white-space:nowrap;text-decoration:none;
  border-bottom:1px solid var(--linea);border-left:2px solid transparent;
  font-family:var(--sans);font-size:var(--t-dato);color:var(--tinta-70) !important;
}
#products .products-sort-order .dropdown-item:last-child{border-bottom:0}
#products .products-sort-order .dropdown-item:hover,
#products .products-sort-order .dropdown-item:focus{background:var(--papel);color:var(--verde) !important;border-left-color:var(--verde)}
#products .products-sort-order .dropdown-item.current{font-weight:600;color:var(--tinta) !important;border-left-color:var(--rojo)}
/* "Ventas en orden decreciente": sin venta en linea no ordena nada */
#products .products-sort-order .dropdown-item[href*="order=product.sales.desc"]{display:none}
/* "por pagina": sobra con familias de 4 a 23 referencias y trae "Show all" en ingles */
#products .products-nb-per-page{display:none}


/* --- 23.4 Rejilla -----------------------------------------------------------
   Hoja cuadriculada con filete de 1 px, igual que las familias de portada.
   Minimo de columna 220 px porque la miniatura home_default mide 236 x 305:
   asi la foto nunca se amplia mas de un 10-20 % ni se queda en sello.
   Sale sola, sin cortes por anchura:
     categoria (columna de 9/12)  >= 1200 px: 4 columnas de ~233 px (foto a 1:1)
                                  992-1199 : 3 columnas de ~240 px
                                  576-991  : 2 columnas
     busqueda (ancho completo)    >= 1200 px: 5 columnas de ~250 px
     movil < 576 px: una referencia por fila, foto a la izquierda (23.8)
   Filete por celda con margen negativo de 1 px, y no gap sobre fondo gris:
   con 11 o 23 referencias la ultima fila queda a medias y un fondo gris
   dejaria un bloque gris donde no hay nada. */
#products .products.products-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:0;margin:0;padding:0 1px 1px 0;border:0;
}
#products .products-grid > .js-product-miniature-wrapper{
  width:auto;max-width:none;flex:none;min-width:0;padding:0;
  margin:0 -1px -1px 0;border:1px solid var(--linea);background:var(--hoja);
}


/* --- 23.5 Tarjeta: la foto --------------------------------------------------
   Caja de proporcion fija 236:305 sobre papel. Con foto, la foto la tapa;
   sin foto (hoy, home_default sin regenerar da 404) queda la caja en calma
   con un rotulo. Nunca un icono roto ni un spinner que no acaba. */
#products .product-miniature,
#products .product-miniature .thumbnail-container{box-shadow:none;border:0}
#products .product-miniature .thumbnail-container{
  position:relative;aspect-ratio:236 / 305;overflow:hidden;
  background:var(--papel);border-bottom:1px solid var(--linea);
}
#products .product-miniature .product-thumbnail{position:absolute;inset:0;display:block}
#products .product-miniature .product-thumbnail > picture:first-child{display:block;width:100%;height:100%}
#products .product-miniature .product-thumbnail > picture:not(:first-child),
#products .product-miniature .product-thumbnail-second{display:none !important}
#products .product-miniature .product-thumbnail img{
  position:relative;display:block;width:100%;height:100%;max-width:none;
  object-fit:contain;opacity:1;
  background-image:none !important;   /* fuera el spinner del tema */
  color:transparent;                  /* si la foto falla, el alt no se pinta encima */
}
/* el tema funde la primera foto al pasar el raton para ensenar la segunda */
#products .product-miniature .thumbnail-container:hover .product-thumbnail-first{opacity:1}
/* Foto que no llega: la carga diferida le pone .error. Se apaga con opacity
   y NO con visibility:hidden: visibility la saca del arbol de accesibilidad y
   el enlace de la foto se quedaba sin nombre ("enlace", sin mas). */
#products .product-miniature .product-thumbnail img.error{opacity:0}
/* rotulo sobre la caja vacia. Va en dos reglas separadas A PROPOSITO: un
   navegador sin :has() descarta la regla entera si un solo selector de la
   lista no lo entiende, y se llevaria por delante la red de abajo.
   Sin :has() (Firefox anterior a la 121) queda la caja de papel sin rotulo. */
#products .product-miniature .thumbnail-container:has(img.error)::after{
  content:"Foto pendiente";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;padding:var(--e4);text-align:center;
  background:var(--papel);pointer-events:none;
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);line-height:1.4;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-55);
}
/* red para imagen rota SIN carga diferida (si se apaga en el editor del
   tema): Chrome y Firefox solo pintan ::after en un <img> cuando esta roto */
#products .product-miniature .product-thumbnail img::after{
  content:"Foto pendiente";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;padding:var(--e4);text-align:center;
  background:var(--papel);pointer-events:none;
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);line-height:1.4;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-55);
}


/* --- 23.6 Tarjeta: los textos -----------------------------------------------
   Nombre en Plex Sans 600 y referencia en mono debajo, como en la tabla de
   las 38 referencias de la portada. Nada de precio: ni el dato ni su hueco. */
#products .product-miniature{
  position:relative;height:100%;margin:0;text-align:left;
  background:var(--hoja);transition:background-color .12s linear;
}
#products .product-miniature .product-description{
  display:flex;flex-direction:column;gap:var(--e2);
  padding:var(--e4) var(--e4) var(--e5);text-align:left;
}
#products .product-miniature .product-title{
  display:block;margin:0;text-decoration:none;text-transform:none;text-wrap:pretty;
  font-family:var(--sans);font-weight:600;font-size:var(--t-dato);
  line-height:1.35;letter-spacing:0;color:var(--tinta);--ft-enlace:var(--tinta);
}
/* el tema la oculta con !important y .text-muted le baja la opacidad a .8 */
#products .product-miniature .product-reference{
  display:block !important;margin:0;opacity:1;overflow-wrap:anywhere;
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-55) !important;
  font-variant-numeric:tabular-nums;
}
#products .product-miniature .product-reference::before{content:"Ref. "}
#products .product-miniature .product-reference a{color:inherit;--ft-enlace:var(--tinta-55);text-decoration:none}
/* la familia solo en busqueda, que mezcla las tres; en categoria es redundante */
:is(#search,#module-iqitsearch-searchiqit) #products .product-miniature .product-category-name{
  display:block !important;margin:0;padding:0;opacity:1;
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-55) !important;
}
/* apagados: carrito, "View", vista rapida, etiquetas, stock, precio,
   descripcion de relleno y marca (la marca NUNCA se publica) */
#products .product-miniature .product-add-cart,
#products .product-miniature .btn-product-list,
#products .product-miniature .product-functional-buttons,
#products .product-miniature .product-flags,
#products .product-miniature .product-availability,
#products .product-miniature .product-price-and-shipping,
#products .product-miniature .product-description-short,
#products .product-miniature .product-brand,
#products .product-miniature-list .col-buy{display:none !important}


/* --- 23.7 Tarjeta: toda ella enlaza a la ficha -------------------------------
   El nombre estira su zona de clic a la tarjeta entera; por eso el "View"
   sobra. Raton: filete verde de 2 px a la izquierda, como las filas de la
   portada. Teclado: marco de 2 px en tinta alrededor de toda la tarjeta.
   El marco va en el ::after del nombre (la capa que estira el enlace) y NO en
   un outline de la tarjeta: la caja de la foto es position:relative y se
   pinta ENCIMA del outline de su madre, asi que el marco solo se veia
   alrededor del texto. z-index 3 lo pone por encima del filete verde (2). */
#products .product-miniature .product-title::after{content:"";position:absolute;inset:0;z-index:3}
#products .product-miniature::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:2px;z-index:2;
  background:transparent;pointer-events:none;transition:background-color .12s linear;
}
#products .product-miniature:hover{background:var(--papel)}
#products .product-miniature:hover::before,
#products .product-miniature:focus-within::before{background:var(--verde)}
#products .product-miniature:hover .product-title{
  color:var(--verde);--ft-enlace:var(--verde);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
}
#products .product-miniature .product-title:focus-visible{outline:0}
#products .product-miniature .product-title:focus-visible::after{outline:2px solid var(--tinta);outline-offset:-2px}
/* Si no se pega listado.js, la foto sigue en el tabulador: su marco va por
   dentro, porque la caja recorta (overflow:hidden) todo lo que sale. */
#products .product-miniature .product-thumbnail:focus-visible{outline-offset:-2px}


/* --- 23.8 Movil: una referencia por fila -------------------------------------
   Por debajo de 576 px dos columnas dejan el nombre en 140 px y la
   referencia partida. En fila, foto de 112 px a la izquierda y el texto con
   todo el ancho: se lee como la tabla de la portada, pero con foto. */
@media(max-width:575.98px){
  #products .products.products-grid{grid-template-columns:minmax(0,1fr)}
  #products .products-grid .product-miniature{
    display:grid;grid-template-columns:112px minmax(0,1fr);align-items:start;
  }
  #products .products-grid .product-miniature .thumbnail-container{
    border-bottom:0;border-right:1px solid var(--linea);
  }
  #products .products-grid .product-miniature .product-description{padding:var(--e3) var(--e4)}
}


/* --- 23.9 Paginacion ---------------------------------------------------------
   Con 24 por pagina solo aparece en /2-inicio y /38-productos (38 referencias).
   Casillas de 44 px, pagina actual en verde lleno. El tema pone en anterior y
   siguiente un icono sin texto: un enlace sin nombre que el lector de pantalla
   anuncia como "enlace". Se le da el nombre con el propio CSS. */
#products .pagination{margin:var(--e6) 0 0;justify-content:flex-start}
#products .pagination .page-list{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
#products .pagination .page-list li{
  display:flex;margin:0 0 0 -1px;background:var(--hoja);
  border:1px solid var(--linea);transition:none;
}
#products .pagination .page-list li:first-child{margin-left:0}
#products .pagination .page-list li.spacer{background:transparent;border-color:transparent}
#products .pagination .page-list a,
#products .pagination .page-list span.spacer{
  display:flex;align-items:center;justify-content:center;
  min-width:var(--fila);min-height:var(--fila);padding:0 var(--e3);text-decoration:none;
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-70);--ft-enlace:var(--tinta-70);font-variant-numeric:tabular-nums;
}
#products .pagination .page-list li:not(.current):not(.spacer):hover{position:relative;z-index:1;border-color:var(--verde)}
#products .pagination .page-list li:not(.current) a:hover{color:var(--verde);--ft-enlace:var(--verde)}
#products .pagination .page-list li.current{position:relative;z-index:1;background:var(--verde);border-color:var(--verde)}
#products .pagination .page-list li.current a{color:#fff;--ft-enlace:#fff}
#products .pagination .page-list a.previous .fa,
#products .pagination .page-list a.next .fa{display:none}
#products .pagination .page-list a.previous::before{content:"Anterior"}
#products .pagination .page-list a.next::after{content:"Siguiente"}


/* --- 23.10 Columna izquierda: las tres familias ------------------------------
   El arbol del tema abre "Inicio > Productos" y deja las tres familias
   PLEGADAS detras de una flecha (clase .collapse sin .show). Con tres
   entradas no hay nada que plegar: se abren y se marca la actual con el
   mismo filete rojo que el menu. El titulo "Inicio" sobra (lo dicen las migas). */
#category #left-column .block-categories{margin:0 0 var(--e6);padding:0;border-top:1px solid var(--linea-fuerte)}
#category #left-column .block-categories > .block-title,
#category #left-column .block-categories .collapse-icons{display:none}
#category #left-column .block-categories .category-top-menu{margin:0;padding:0}
#category #left-column .block-categories ul{margin:0;padding:0;list-style:none;font-size:inherit}
#category #left-column .block-categories li{margin:0}
#category #left-column .block-categories .collapse{display:block !important;height:auto !important;visibility:visible !important}
#category #left-column .block-categories li[data-depth="0"] > a{
  display:block;padding:var(--e3) 0;text-decoration:none;
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-55);--ft-enlace:var(--tinta-55);
}
#category #left-column .block-categories li[data-depth="0"] > a:hover{color:var(--verde);--ft-enlace:var(--verde)}
#category #left-column .block-categories .category-sub-link{
  display:flex;align-items:center;min-height:var(--fila);padding:var(--e2) var(--e4);
  border-top:1px solid var(--linea);border-left:2px solid transparent;text-decoration:none;
  font-family:var(--sans);font-size:var(--t-dato);line-height:1.35;color:var(--tinta-70);--ft-enlace:var(--tinta-70);
  transition:background-color .12s linear,border-color .12s linear,color .12s linear;
}
#category #left-column .block-categories .category-sub-link:hover{background:var(--hoja);color:var(--verde);--ft-enlace:var(--verde);border-left-color:var(--verde)}
/* la ultima familia cierra con filete, como las filas de la tabla de portada */
#category #left-column .block-categories .collapse > .category-sub-menu{border-bottom:1px solid var(--linea)}
#category.category-id-3 #left-column a.category-sub-link[href*="/3-"],
#category.category-id-4 #left-column a.category-sub-link[href*="/4-"],
#category.category-id-5 #left-column a.category-sub-link[href*="/5-"]{
  background:var(--hoja);color:var(--tinta);--ft-enlace:var(--tinta);font-weight:600;border-left-color:var(--rojo);
}


/* --- 23.11 Filtros ------------------------------------------------------------
   Hoy no hay ninguno configurado (ps_facetedsearch no pinta nada). Si se
   crean, que salgan con el registro del resto y no con el del tema. */
#category #left-column #search_filters .facet-title{
  margin:0 0 var(--e3);padding:0 0 var(--e2);border-bottom:1px solid var(--linea);
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-55);
}
#category #left-column #search_filters .facet-label a{font-size:var(--t-dato);color:var(--tinta-70);--ft-enlace:var(--tinta-70);text-decoration:none}
#category #left-column #search_filters .facet-label a:hover{color:var(--verde);--ft-enlace:var(--verde)}
#category #left-column #search_filters .magnitude{font-family:var(--mono);font-size:var(--t-micro);color:var(--tinta-55)}
#category #left-column #search_filters input{accent-color:var(--verde)}


/* --- 23.12 Recarga al ordenar -------------------------------------------------
   Al cambiar el orden el tema atenua la rejilla (opacity .4) y encima pone un
   icono girando. La rejilla atenuada ya dice "cargando": el icono sobra. */
#products #facets-loader-icon,
#products #infinity-loader-icon{display:none !important}


/* --- 23.13 Impresion: la familia como lista de referencias ------------------ */
@media print{
  #category #left-column,
  #products .products-selection,
  #products .pagination,
  .ft-franja-acciones{display:none !important}
  #products .products.products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #products .product-miniature .thumbnail-container{display:none}
  #products .products-grid > .js-product-miniature-wrapper{break-inside:avoid}
  #products .product-miniature .product-title::after{content:none}
}
/* =============================================================================
   24. PAGINAS DE ESTADO - 404, 410, busqueda sin resultados, categoria vacia
   -----------------------------------------------------------------------------
   Plantilla ftassets/views/templates/hook/estado.tpl. La pintan dos ganchos:
     displayNotFound       -> 404 y 410, dentro de section.page-not-found
     displayFooterCategory -> listados vacios, como hijo directo de #main
   Una pagina vacia no es un final: cuatro salidas, siempre las mismas
   (familia, nombre, encargo, telefono), sobre la misma hoja cuadriculada que
   el resto de la web.
   -------------------------------------------------------------------------- */

/* Lo que el tema pinta en esas paginas se oculta SOLO si el bloque propio
   esta presente. Si ftassets se desactiva, el aviso del tema vuelve solo y la
   pagina nunca se queda en blanco. Sin :has() (navegadores anteriores a
   2023) se ven los dos avisos: feo, pero no rompe nada.
     - 404 y 410: "No hay productos disponibles" y "Estate atento...", que es
       el mensaje de una categoria vacia, tuteando, en una pagina que no es
       una categoria; y un segundo buscador de iqitsearch con el texto en
       ingles ("Search our catalog").
     - listados: "There are no products." */
.page-not-found:has(> .ft-estado) > h4,
.page-not-found:has(> .ft-estado) > p,
.page-not-found:has(> .ft-estado) > .search-widget,
#main:has(> .ft-estado) > #products > .alert{display:none}

/* el tema deja 160 px bajo el contenido del 404; con el bloque debajo sobran */
#pagenotfound #main .page-content:has(> .ft-estado){margin-bottom:0}

.ft-estado{margin:var(--e6) 0 var(--e8)}

/* --- cabecera: rotulo, frase y entrada ------------------------------------- */
.ft-estado-cab{max-width:760px}
.ft-estado-cab > .ft-rot{display:block;margin:0}
.ft-estado-cab > h2{
  margin:var(--e3) 0 0;font-size:var(--t-h3);font-weight:600;
  letter-spacing:-.01em;line-height:1.2;
  overflow-wrap:anywhere;          /* un termino larguisimo no desborda en movil */
}
.ft-estado-entrada{margin:var(--e3) 0 0;font-size:var(--t-dato);color:var(--tinta-70)}
/* Todo enlace fija tambien --ft-enlace (seccion 7b): la regla global
   #wrapper a:not(.nav-link):not(.btn) tiene especificidad 1,2,1 y le gana a
   cualquier color puesto con una sola clase. */
.ft-estado-entrada a{color:var(--verde);--ft-enlace:var(--verde);font-weight:600;text-underline-offset:3px}

/* --- hoja cuadriculada: familias a la izquierda, las otras tres vias a la
       derecha. gap:1px sobre fondo de linea, como el listado de referencias -- */
.ft-estado-rejilla{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:1px;background:var(--linea);border:1px solid var(--linea-fuerte);
  margin-top:var(--e6);
}
.ft-estado-vias{display:grid;gap:1px;background:var(--linea)}
.ft-estado-bloque{background:var(--hoja);padding:var(--e5);margin:0;min-width:0}
.ft-estado-bloque > h3{margin:0 0 var(--e4)}
.ft-estado-bloque > p{margin:0 0 var(--e4);font-size:var(--t-dato);color:var(--tinta-70)}
.ft-estado-bloque > p strong{color:var(--tinta);font-weight:600}
.ft-estado-bloque > .ft-ayuda{margin:var(--e3) 0 0;color:var(--tinta-55)}

/* --- por familia ------------------------------------------------------------ */
.ft-estado-bloque.ft-estado-familias{padding:0}
.ft-estado-familias > h3{margin:0;padding:var(--e5) var(--e5) var(--e4)}
.ft-estado-familias ul{list-style:none;margin:0;padding:0}
.ft-estado-familias li{border-top:1px solid var(--linea)}
.ft-estado-familias a{
  display:grid;grid-template-columns:52px minmax(0,1fr);
  column-gap:var(--e4);row-gap:2px;align-items:start;
  padding:var(--e4) var(--e5);text-decoration:none;
  border-left:2px solid transparent;
  transition:background .12s linear,border-color .12s linear;
}
/* el teclado ve el mismo estado que el raton, ademas del contorno de foco */
.ft-estado-familias a:hover,
.ft-estado-familias a:focus-visible{background:var(--papel);border-left-color:var(--verde)}
.ft-estado-familias a:hover .ft-estado-t,
.ft-estado-familias a:focus-visible .ft-estado-t{color:var(--verde)}
.ft-estado-n{
  grid-column:1;grid-row:1 / span 2;
  font-family:var(--disp);font-weight:600;font-size:var(--t-h3);line-height:1;
  color:var(--verde);font-variant-numeric:tabular-nums;
}
.ft-estado-t{
  grid-column:2;font-family:var(--disp);font-weight:600;font-size:var(--t-h4);
  letter-spacing:-.01em;line-height:1.25;color:var(--tinta);
}
.ft-estado-d{grid-column:2;font-size:var(--t-dato);color:var(--tinta-70)}

/* --- por nombre: buscador propio. El de iqitsearch lleva el texto en ingles y
       un autocompletado que aqui no hace falta. GET a /busqueda. ------------ */
.ft-estado-campo{display:flex;align-items:stretch}
.ft-estado-campo input[type=search]{
  flex:1 1 auto;min-width:0;width:100%;margin:0;
  -webkit-appearance:none;appearance:none;border-right:0;
}
.ft-estado-campo input[type=search]::placeholder{color:var(--tinta-55);opacity:1}
.ft-estado-campo .btn{flex:0 0 auto;margin:0}

/* --- por telefono: la cifra manda, como en el pie ------------------------- */
.ft-estado-tel{
  display:inline-block;font-family:var(--disp);font-weight:600;font-size:var(--t-h3);
  letter-spacing:-.02em;line-height:1.1;color:var(--tinta);--ft-enlace:var(--tinta);text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.ft-estado-tel:hover{color:var(--verde);--ft-enlace:var(--verde)}

/* --- enlaces del pie del bloque: reutiliza .ft-volver (seccion 20) --------- */
.ft-estado .ft-volver{margin-top:var(--e6)}
.ft-estado .ft-volver a{padding-block:var(--e2)}

/* --- adaptacion ------------------------------------------------------------ */
@media(max-width:900px){
  .ft-estado-rejilla{grid-template-columns:1fr}
}
@media(max-width:560px){
  .ft-estado-bloque{padding:var(--e4)}
  .ft-estado-bloque.ft-estado-familias{padding:0}
  .ft-estado-familias > h3{padding:var(--e4) var(--e4) var(--e3)}
  .ft-estado-familias a{padding:var(--e4);grid-template-columns:44px minmax(0,1fr)}
}
/* =============================================================================
   25. CONTACTO - /contactenos
   -----------------------------------------------------------------------------
   Columna izquierda: bloque de datos de iqitcontactpage. Sus valores se ponen
   por SQL (11-contacto.sql), no desde su pantalla del back office.
   Columna derecha: formulario de contactform con la plantilla de Warehouse.
   El aviso de dentro del formulario lo pinta ftassets en displayGDPRConsent
   (plantilla contacto-aviso.tpl).

   Sin mapa: iqitcontactp_show_map = 0. Ocultarlo por CSS NO serviria: un
   iframe con display:none se descarga igual, y con el la IP del visitante
   viaja a Google (EE. UU.) sin consentimiento.
   -------------------------------------------------------------------------- */

/* --- columna de datos: filete de la paleta, no el gris translucido del tema.
       Solo se tocan margen y borde: el relleno lateral es el canal de la
       rejilla de Bootstrap y tiene que seguir alineado con el formulario. --- */
#contact .contact-page-info{border-right:1px solid var(--linea);border-bottom:0;margin-bottom:0;padding-right:var(--e6)}
@media(max-width:575.98px){
  #contact .contact-page-info{
    border-right:0;border-bottom:1px solid var(--linea);
    padding-right:calc(var(--bs-gutter-x,1.5rem) * .5);   /* el canal de Bootstrap */
    padding-bottom:var(--e5);margin-bottom:var(--e6);
  }
}

#contact .contact-rich{display:flex;flex-direction:column}
#contact .contact-rich > strong{
  display:block;margin:0 0 var(--e3);
  font-family:var(--disp);font-weight:600;font-size:var(--t-h4);color:var(--tinta);
}
/* el filete lo pone cada dato; los <hr> del modulo sobran */
#contact .contact-rich hr,
#contact .contact-page-info > hr{display:none}
#contact .contact-rich .part{
  display:block;height:auto;overflow:visible;
  border-top:1px solid var(--linea);padding:var(--e3) 0;
}
#contact .contact-rich .part .icon{display:block;width:auto;text-align:left;margin:0 0 var(--e1)}
#contact .contact-rich .part .icon i{display:none}
#contact .contact-rich .part .data{
  display:block;width:auto;overflow:visible;
  font-size:var(--t-dato);line-height:1.6;color:var(--tinta-70);
}

/* Rotulo de cada dato, sacado del icono que pone el modulo: si cambia el
   orden o el numero de campos, cada rotulo sigue a su dato. Sin :has() no hay
   rotulo y el dato se entiende igual. "\E9 " es la e acentuada: escrita asi,
   el rotulo no depende de la codificacion con que se sirva la hoja. */
#contact .contact-rich .icon::before{
  display:block;font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-55);
}
#contact .contact-rich .icon:has(.fa-map-marker)::before{content:"Domicilio"}
#contact .contact-rich .icon:has(.fa-phone)::before{content:"Tel\E9 fono"}
#contact .contact-rich .icon:has(.fa-envelope-o)::before{content:"Correo"}

/* cada color de enlace fija tambien --ft-enlace (seccion 7b) */
#contact .contact-rich a[href^="tel:"]{
  font-family:var(--disp);font-weight:600;font-size:var(--t-h3);letter-spacing:-.02em;
  color:var(--tinta);--ft-enlace:var(--tinta);text-decoration:none;font-variant-numeric:tabular-nums;
}
#contact .contact-rich a[href^="tel:"]:hover{color:var(--verde);--ft-enlace:var(--verde)}
#contact .contact-rich .email a{color:var(--verde);--ft-enlace:var(--verde);word-break:break-all}

/* --- texto propio de la columna (campo content de iqitcontactpage) --------- */
#contact .contact-page-info > .part{
  margin-top:var(--e5);padding-top:var(--e5);border-top:1px solid var(--linea-fuerte);
}
.ft-contacto-uso > .ft-rot{display:block;margin:0 0 var(--e2)}
.ft-contacto-uso > p:not(.ft-rot){margin:0 0 var(--e3);font-size:var(--t-dato);color:var(--tinta-70)}
.ft-contacto-uso strong{color:var(--tinta);font-weight:600}
.ft-contacto-uso .btn{margin-top:var(--e2)}

/* --- formulario ------------------------------------------------------------- */
/* el titulo "Contacte con nosotros" del formulario repite el H1 de la pagina */
#contact .contact-form .form-fields > .form-group:first-child:has(h4){display:none}
#contact .contact-form .form-control-comment{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-55);align-self:center;
}
#contact .contact-form .form-footer{
  margin-top:var(--e4);padding-top:var(--e5);border-top:1px solid var(--linea);
}

/* --- aviso de dentro del formulario (gancho displayGDPRConsent) ------------ */
.ft-contacto-aviso{border-top:1px solid var(--linea);padding-top:var(--e4)}
.ft-contacto-presu{margin:0;font-size:var(--t-dato);color:var(--tinta-70)}
.ft-contacto-presu strong{color:var(--tinta);font-weight:600}
.ft-contacto-aviso a{color:var(--verde);--ft-enlace:var(--verde);font-weight:600;text-underline-offset:3px}
.ft-contacto-aviso > .ft-rot{display:block;margin:var(--e5) 0 var(--e2)}
.ft-contacto-rgpd{margin:0}
/* La tabla va dentro de col-md-9 de col-sm-8: entre 768 y 1199 px mide de
   318 a 530 px. Con el minmax(190px,1fr) 2fr de .ft-tabla el correo no cabia
   en su celda y se salia. El rotulo toma lo que ocupa y el valor el resto.
   Solo por encima de 640 px, donde .ft-tabla no se apila. */
@media(min-width:641px){.ft-contacto-rgpd{grid-template-columns:max-content minmax(0,1fr)}}
.ft-contacto-rgpd a{overflow-wrap:anywhere}
/* Bootstrap pone dt{font-weight:700} y la mono solo esta cargada en 500: sin
   esto el navegador fabrica una negrita falsa */
.ft-contacto-rgpd > dt{font-weight:500}
.ft-contacto-mas{margin:var(--e3) 0 0;font-size:var(--t-dato);color:var(--tinta-55)}
/* -----------------------------------------------------------------------------
   26. PAGINAS LEGALES — condiciones, aviso legal, privacidad y cookies
   Marcado real: section#content.page-content.page-cms > div.ft-legal, que
   pinta ftassets por displayCMSDisputeInformation (views/templates/hook/
   cms.tpl) con el HTML de 6nujs_cms_lang.content. Documento de lectura: una
   columna, filete de 1 px entre apartados y numero de apartado por contador
   CSS, como la portada. Si un apartado sobra se borra; no se renumera a mano.
   El 21 es provisional: otros cuatro fragmentos del 10/09 tambien dicen 21.
   Al pegarlo se le da el siguiente numero libre; el CSS no cambia.
   -------------------------------------------------------------------------- */
.ft-legal{max-width:880px;counter-reset:ftleg;padding-bottom:var(--e8)}
.ft-legal > p,.ft-legal li{line-height:1.65}
.ft-legal > p{margin:0 0 var(--e4)}
.ft-legal h2{
  counter-increment:ftleg;font-size:var(--t-h3);font-weight:600;
  margin:var(--e7) 0 var(--e4);padding-top:var(--e4);
  border-top:1px solid var(--linea-fuerte);
}
/* el numero es adorno: con la segunda declaracion (texto alternativo vacio)
   el lector de pantalla no lee "cero uno" antes de cada apartado. El
   navegador que no la entiende la descarta y se queda con la primera. */
.ft-legal h2::before{
  content:counter(ftleg,decimal-leading-zero);
  content:counter(ftleg,decimal-leading-zero) / "";
  display:block;margin-bottom:var(--e2);
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.18em;color:var(--tinta-55);font-variant-numeric:tabular-nums;
}
.ft-legal h3{font-size:var(--t-h4);font-weight:600;margin:var(--e6) 0 var(--e3)}
/* theme.css de Warehouse pone ul{list-style:none;padding-left:0}: en un texto
   legal la vineta es estructura, no adorno, asi que se devuelve */
.ft-legal ul{list-style:disc outside;margin:0 0 var(--e5);padding-left:1.25em;max-width:68ch}
.ft-legal li{margin-top:var(--e2)}
.ft-legal li::marker{color:var(--tinta-55)}
/* El color va por --ft-enlace (seccion 7b): la regla global #wrapper a:... pesa
   1,2,1 y se comeria un color puesto aqui, sobre todo el del hover.
   Subrayado siempre: el verde contra la tinta del texto no llega al 3:1 que
   pide WCAG 1.4.1 para distinguir un enlace solo por el color.
   Un correo largo no puede ensanchar la pagina en movil. */
.ft-legal a{--ft-enlace:var(--verde);color:var(--verde);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.ft-legal a:hover{--ft-enlace:var(--verde-hover);color:var(--verde-hover);text-decoration:underline}
.ft-legal strong{font-weight:600}
/* fecha de la version, en rotulo */
.ft-legal > .ft-rot{display:block;margin:0 0 var(--e6)}

/* tablas: la caja se desplaza por dentro en movil y no ensancha la pagina */
.ft-legal-tabla{overflow-x:auto;margin:0 0 var(--e5);background:var(--hoja);
  border:1px solid var(--linea-fuerte)}
/* la tabla de cookies lleva tabindex="0" para poder desplazarla con el
   teclado; el foco se ve igual que en el resto de la web (seccion 10) */
.ft-legal-tabla:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.ft-legal table{width:100%;border-collapse:collapse;margin:0;font-size:var(--t-dato)}
.ft-legal table:not(.ft-ficha){min-width:560px}
.ft-legal th,.ft-legal td{padding:11px var(--e4);text-align:left;vertical-align:top;
  line-height:1.55;border-top:1px solid var(--linea)}
.ft-legal tr > * + *{border-left:1px solid var(--linea)}
.ft-legal tbody tr:first-child > *,.ft-legal thead tr > *{border-top:0}
.ft-legal thead + tbody tr:first-child > *{border-top:1px solid var(--linea)}
.ft-legal th{font-family:var(--mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-55);background:var(--papel)}
.ft-legal .ft-ficha th{width:32%;min-width:150px}
@media(max-width:640px){
  /* ficha de dos columnas: rotulo encima, valor debajo, como la ficha tecnica */
  .ft-legal .ft-ficha tr,.ft-legal .ft-ficha th,.ft-legal .ft-ficha td{display:block;width:auto;min-width:0}
  .ft-legal .ft-ficha th{padding-bottom:2px}
  .ft-legal .ft-ficha td{border-top:0;border-left:0;padding-top:2px}
}

/* lo que falta por confirmar se ve, no se esconde: mismo rojo que .ft-pend
   de la portada, a tamano de lectura */
.ft-legal .ft-pend{font-size:var(--t-dato);letter-spacing:0;line-height:1.55}

/* aviso de borrador: sale del texto cuando lo apruebe el asesor
   (generar-sql.ps1 -Final lo quita) */
.ft-legal .ft-borrador{max-width:none;margin:0 0 var(--e5);padding:var(--e4) var(--e5);
  background:var(--hoja);border:1px solid var(--rojo);border-left-width:3px;
  font-size:var(--t-dato)}
.ft-legal .ft-borrador strong{color:var(--rojo)}

@media print{
  .ft-legal-tabla{overflow:visible}
  .ft-legal table:not(.ft-ficha){min-width:0}
}
/* -----------------------------------------------------------------------------
   27. TIPOGRAFIA SIN TERCEROS - el unico hueco del puente con Bootstrap
   Karla deja de pedirse a fonts.googleapis.com (trabajo/terceros-y-rgpd). En
   la practica nunca se veia: el CSS del editor del tema la ponia en body, pero
   la regla body de esta hoja (seccion 6) se carga despues y gana con el mismo
   selector. Titulares (h1-h5, .h1-.h4) ya van en --disp y el resto hereda
   Plex Sans del body. Lo unico que salia con otra letra, y no dependia de
   Karla: Bootstrap 5.3 compone .tooltip y .popover con var(--bs-font-sans-serif)
   (system-ui, Segoe UI, Roboto...), la unica variable de fuente de Bootstrap
   que la seccion 3 no redefinia. Hoy se nota en el rotulo "Vista rapida" que
   sale al pasar el raton por el boton del ojo en listados y busqueda.
   -------------------------------------------------------------------------- */
:root{--bs-font-sans-serif:var(--sans)}


/* =============================================================================
   28. CAPA 2027 — HERO DESLIZADOR, BOTONES CON VIDA, VIDEO
   Rompe a proposito con la austeridad de las secciones 1-27, pero SOLO donde
   suma de verdad: el hero de la portada y los botones (que se ven en todo el
   sitio). El resto del documento tecnico sigue igual. Se bate el reset global
   de la seccion 4 (border-radius:0 !important) con !important puntual, y se
   evita backdrop-filter para no hundir el movil de gama media (queja del 165).
   -------------------------------------------------------------------------- */
:root{
  --r-cta:999px;
  --r-card:16px;
  --sombra-cta:0 8px 20px -8px rgba(14,43,34,.45);
  --sombra-cta-h:0 14px 32px -10px rgba(14,43,34,.55);
  --deg-verde:linear-gradient(135deg,#1B6B4C 0%,#0E2B22 100%);
}

/* --- botones con vida: pastilla, elevacion al pasar, brillo diagonal --- */
.btn,.btn-primary,.btn-outline-primary,.btn-secondary,.ft-btn-sec,.ft-btn-correo{
  border-radius:var(--r-cta) !important;
  font-weight:600;letter-spacing:.01em;padding:.85em 1.6em;
  transition:transform .16s ease,box-shadow .22s ease,background .2s ease,color .2s ease,border-color .2s ease;
  will-change:transform;
}
.btn-primary,.btn.btn-primary{
  background:var(--deg-verde) !important;border-color:transparent !important;color:#fff !important;
  box-shadow:var(--sombra-cta) !important;position:relative;overflow:hidden;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--sombra-cta-h) !important}
.btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.btn-primary:hover::after{left:150%}

.ft-btn-correo{background:#fff !important;color:var(--verde) !important;
  border:1.5px solid var(--verde) !important;box-shadow:var(--sombra-cta) !important}
.ft-btn-correo::before{content:"\2709\00a0\00a0"}
.ft-btn-correo:hover{transform:translateY(-2px);background:var(--verde) !important;color:#fff !important;
  border-color:var(--verde) !important;box-shadow:var(--sombra-cta-h) !important}

.ft-btn-sec{box-shadow:none !important}
.ft-btn-sec:hover{transform:translateY(-2px)}

/* --- HERO DESLIZADOR --- */
.ft-hero-slider{position:relative;width:100%;min-height:clamp(560px,86vh,780px);
  padding:0 !important;margin:0;overflow:hidden;isolation:isolate;
  background:var(--banda);color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.ft-slides{position:absolute;inset:0;z-index:0}
.ft-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;display:flex;align-items:flex-end}
.ft-slide.is-active{opacity:1}
.ft-slide:not(.is-active){pointer-events:none}
.ft-slide[hidden]{display:none}
.ft-slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);z-index:0}
.ft-slide.is-active .ft-slide-bg{animation:ftken 14s ease-out forwards}
.ft-slide-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,43,34,.25) 0%,rgba(14,43,34,.42) 42%,rgba(8,20,16,.90) 100%),
             linear-gradient(90deg,rgba(8,20,16,.55) 0%,rgba(8,20,16,0) 62%)}
@keyframes ftken{from{transform:scale(1.06)}to{transform:scale(1.14)}}

.ft-slide-txt{position:relative;z-index:1;width:min(100%,var(--ancho));margin-inline:auto;
  padding-inline:var(--margen);padding-top:clamp(70px,10vh,110px);
  padding-bottom:clamp(160px,26vh,255px)}
.ft-kicker{display:inline-block;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;color:#EAF3EE;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.30);
  padding:.5em 1em;border-radius:999px !important;margin:0 0 var(--e4)}
.ft-hero-slider h1,.ft-slide-h{font-family:var(--disp);color:#fff !important;font-weight:600;
  font-size:clamp(32px,5vw,62px);line-height:1.03;letter-spacing:-.02em;margin:0;max-width:18ch;
  text-wrap:balance;text-shadow:0 2px 24px rgba(8,20,16,.40)}
.ft-hero-slider .ft-sub{margin-top:var(--e4);max-width:56ch;font-size:clamp(16px,1.5vw,20px);
  color:#E7EEEA !important;line-height:1.5;text-shadow:0 1px 12px rgba(8,20,16,.5)}

.ft-hero-pie{position:absolute;left:0;right:0;bottom:0;z-index:2;
  width:min(100%,var(--ancho));margin-inline:auto;padding-inline:var(--margen);
  padding-bottom:clamp(18px,3vh,30px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--e4)}
.ft-acciones-hero{margin-top:0}
.ft-hero-pie .ft-btn-sec{background:rgba(255,255,255,.10) !important;color:#fff !important;
  border:1.5px solid rgba(255,255,255,.5) !important}
.ft-hero-pie .ft-btn-sec:hover{background:#fff !important;color:var(--verde) !important;border-color:#fff !important}

.ft-slider-nav{display:flex;align-items:center;gap:var(--e3)}
.ft-flecha{width:44px;height:44px;border-radius:999px !important;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.4);color:#fff;font-size:24px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s,transform .15s}
.ft-flecha:hover{background:rgba(255,255,255,.28);transform:translateY(-1px)}
.ft-puntos{display:flex;gap:10px;align-items:center}
.ft-punto{width:10px;height:10px;border-radius:999px !important;padding:0;background:rgba(255,255,255,.4);
  border:0;cursor:pointer;transition:background .25s,width .3s}
.ft-punto.is-active{background:#fff;width:26px}

@media (max-width:820px){
  .ft-hero-pie{flex-direction:column;align-items:stretch}
  .ft-acciones-hero{width:100%}
  .ft-acciones-hero .ft-cta{flex:1 1 auto;justify-content:center;text-align:center}
  .ft-slider-nav{justify-content:center}
  .ft-slide-txt{padding-bottom:clamp(210px,36vh,280px)}
}

/* --- video de portada (paso 04) --- */
.ft-video{position:relative;overflow:hidden;border-radius:var(--r-card) !important;box-shadow:var(--sombra-cta)}
.ft-video .ft-video-el{display:block;width:100%;height:auto;object-fit:cover;background:var(--banda)}

/* --- barra movil: tercer enlace y CTA verde --- */
.ft-barra-cta{background:var(--verde);color:#fff !important;--ft-enlace:#fff}

@media (prefers-reduced-motion:reduce){
  .ft-slide{transition:opacity .001s}
  .ft-slide.is-active .ft-slide-bg{animation:none}
  .btn-primary::after{display:none}
  .btn,.ft-cta,.ft-flecha{transition:none}
}

/* 28b · Sección ingeniería textil (fuera del documento numerado) */
.ft-ingenieria{padding-block:clamp(56px,8vw,110px)}
.ft-ingenieria .ft-rot{color:var(--verde-claro)}
.ft-ingenieria .ft-foto-ancha{margin-top:var(--e6);border-radius:var(--r-card) !important;overflow:hidden;box-shadow:var(--sombra-cta)}
.ft-ingenieria .ft-foto-ancha img{width:100%;height:auto;display:block}
.ft-ingenieria .ft-acciones{margin-top:var(--e6)}

/* 28c · Ficha técnica en página de producto (datos reales del catálogo) */
.ft-fichatec{margin:0 0 var(--e5);padding:0;border-top:1px solid var(--linea-fuerte)}
.ft-fichatec-tit{display:block;margin:var(--e4) 0 var(--e2)}
.ft-fichatec > div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--linea)}
.ft-fichatec dt{margin:0}
.ft-fichatec dd{margin:0;text-align:right;font-weight:500;color:var(--tinta)}

/* 28d · Precio para cuentas B2B aprobadas (regla de oro: solo grupo aprobado) */
.ft-precio-aprob{border:1px solid var(--verde);border-left:4px solid var(--verde);background:var(--hoja)}
.ft-precio-aprob .valor{color:var(--verde);font-weight:600}
.ft-precio-aprob .valor small{color:var(--tinta-55);font-weight:500;letter-spacing:.04em}
.ft-precio-tiers{list-style:none;margin:var(--e3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e2)}
.ft-precio-tiers li{font-size:.85rem;color:var(--tinta);background:var(--hoja);border:1px solid var(--linea);border-radius:var(--curva);padding:var(--e1) var(--e3);letter-spacing:.02em}

/* ==========================================================================
   29. CAPA FLIPADA — HERO 2027 (oscuro, energia roja del logo, cinetico)
   Sustituye al deslizador. Fondo real (foto + video opcional en escritorio),
   resplandor rojo, titular que entra palabra a palabra, linea de sectores que
   rota y datos-capsula que cuentan solos. Respeta prefers-reduced-motion.
   ========================================================================== */
:root{ --rojo-viv:#E5261A; --rojo-glow:#FF3A2A; }

.ft-hero2{position:relative;isolation:isolate;overflow:hidden;background:#07130e;color:#fff;
  min-height:clamp(600px,94vh,900px);display:flex;flex-direction:column;justify-content:center;
  margin:0;padding:0 !important}
.ft-hero2-media{position:absolute;inset:0;z-index:0}
.ft-hero2-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.08);animation:ft2ken 22s ease-out forwards}
@keyframes ft2ken{to{transform:scale(1.16)}}
.ft-hero2-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.ft-hero2-video.on{opacity:.9}
.ft-hero2-scrim{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 12% 18%, rgba(7,19,14,.30), transparent 60%),
    linear-gradient(180deg, rgba(7,19,14,.60) 0%, rgba(7,19,14,.34) 40%, rgba(6,15,11,.93) 100%),
    linear-gradient(90deg, rgba(6,15,11,.82) 0%, rgba(6,15,11,.12) 56%, rgba(6,15,11,.40) 100%)}
.ft-hero2-grid{position:absolute;inset:0;opacity:.13;mix-blend-mode:screen;
  background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);
  background-size:clamp(46px,5vw,64px) clamp(46px,5vw,64px);
  -webkit-mask-image:radial-gradient(115% 80% at 82% 8%, #000 0%, transparent 68%);
          mask-image:radial-gradient(115% 80% at 82% 8%, #000 0%, transparent 68%)}
.ft-hero2-glow{position:absolute;z-index:1;right:-16%;top:0;width:52vw;height:52vw;
  max-width:680px;max-height:680px;pointer-events:none;filter:blur(36px);
  background:radial-gradient(circle at center, rgba(229,38,26,.22) 0%, rgba(229,38,26,.06) 40%, transparent 64%)}
@keyframes ft2pulso{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

.ft-hero2-inner{position:relative;z-index:2;width:min(100%,var(--ancho));margin-inline:auto;
  padding-inline:var(--margen);padding-block:clamp(88px,13vh,150px)}
.ft-hero2-kicker{display:inline-flex;align-items:center;gap:.6em;opacity:0;transform:translateY(14px);
  animation:ft2sube .7s .05s cubic-bezier(.2,.7,.2,1) forwards}
.ft-latido{width:8px;height:8px;border-radius:999px !important;background:var(--rojo-glow);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(255,58,42,.7);animation:ft2latido 2.4s infinite}
@keyframes ft2latido{0%{box-shadow:0 0 0 0 rgba(255,58,42,.6)}70%{box-shadow:0 0 0 9px rgba(255,58,42,0)}100%{box-shadow:0 0 0 0 rgba(255,58,42,0)}}

.ft-hero2-h{font-family:var(--disp);font-weight:800;font-size:clamp(38px,6.6vw,88px);line-height:1.0;
  letter-spacing:-.025em;margin:.45em 0 0;max-width:17ch;text-wrap:balance;color:#fff}
.ft-hero2-h .ft-w{display:inline-block;opacity:0;transform:translateY(26px);animation:ft2sube .8s cubic-bezier(.2,.7,.2,1) forwards}
.ft-hero2-h .ft-ac{position:relative;color:#fff}
.ft-hero2-h .ft-ac::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.12em;border-radius:6px;
  background:linear-gradient(90deg,var(--rojo-viv),var(--rojo-glow));box-shadow:0 0 22px rgba(255,58,42,.55);
  transform:scaleX(0);transform-origin:left;animation:ft2raya .7s 1.15s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ft2raya{to{transform:scaleX(1)}}
@keyframes ft2sube{to{opacity:1;transform:none}}

.ft-hero2-rot{margin:1.2em 0 0;font-family:var(--mono);font-size:clamp(14px,1.5vw,17px);letter-spacing:.02em;
  color:#CFE0D8;display:flex;align-items:center;gap:.55em;flex-wrap:wrap;opacity:0;animation:ft2sube .7s .95s forwards}
.ft-swap{position:relative;display:inline-grid}
.ft-swap b{grid-area:1/1;color:#fff;font-family:var(--sans);font-weight:600;white-space:nowrap;
  opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.ft-swap b.on{opacity:1;transform:none}
.ft-swap b::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.5em;
  border-radius:2px;background:var(--rojo-glow);transform:rotate(45deg);vertical-align:middle}

.ft-hero2-cta{margin-top:1.9em;opacity:0;animation:ft2sube .7s 1.1s forwards}
.ft-hero2 .ft-btn-sec{background:rgba(255,255,255,.08) !important;color:#fff !important;border:1.5px solid rgba(255,255,255,.5) !important}
.ft-hero2 .ft-btn-sec:hover{background:#fff !important;color:var(--verde) !important;border-color:#fff !important}

.ft-hero2-stats{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:2.4em 0 0;padding:0;opacity:0;animation:ft2sube .7s 1.3s forwards}
.ft-hero2-stats li{flex:1 1 150px;min-width:138px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:16px !important;padding:15px 18px}
.ft-hero2-stats li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--rojo-viv),var(--rojo-glow))}
.ft-hero2-stats b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(26px,3vw,38px);line-height:1;color:#fff}
.ft-hero2-stats span{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#B9CAC1}

.ft-hero2-cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;
  width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:16px !important;display:grid;place-items:start center;padding-top:7px}
.ft-hero2-cue span{width:4px;height:8px;border-radius:4px;background:#fff;animation:ft2cae 1.6s infinite}
@keyframes ft2cae{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

@media (max-width:820px){
  .ft-hero2-inner{padding-block:clamp(76px,12vh,120px)}
  .ft-hero2-cta{display:flex;flex-direction:column;align-items:stretch}
  .ft-hero2-cta .ft-cta{justify-content:center;text-align:center}
  .ft-hero2-glow{opacity:.5}
  .ft-hero2-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ft-hero2-bg,.ft-hero2-glow,.ft-latido,.ft-hero2-cue span{animation:none}
  .ft-hero2-h .ft-w,.ft-hero2-kicker,.ft-hero2-rot,.ft-hero2-cta,.ft-hero2-stats{opacity:1;transform:none;animation:none}
  .ft-hero2-h .ft-ac::after{animation:none;transform:scaleX(1)}
}

/* 29b · familias con mas fuerza (numero en degradado, tarjeta que se eleva) */
.ft-familias > article{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.ft-familias > article:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(16,21,18,.42)}
.ft-familias > article::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--verde),var(--rojo-viv));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.ft-familias > article:hover::after{transform:scaleX(1)}
.ft-familias .ft-cuenta{display:inline-block;
  background:linear-gradient(120deg,var(--verde) 0%,var(--rojo-viv) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* 29c · toque sutil en los costados: tinte de marca muy tenue en el fondo,
   para que el blanco de los lados no canse. Fijo al viewport en escritorio. */
body{
  background-color:var(--papel);
  background-image:
    radial-gradient(1100px 520px at 100% -6%, rgba(20,82,59,.055), transparent 60%),
    radial-gradient(900px 480px at 0% 104%, rgba(168,28,28,.038), transparent 60%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
@media (max-width:820px){ body{background-attachment:scroll} }

/* ============================================================
   CAPA DOSIER — rediseno portada 07/10/2026 (clases ftx-)
   Aspecto de especialista industrial: heroe oscuro + tipo con autoridad.
   Respaldo del CSS anterior: trabajo/backups-dosier-07oct/fornituras.css.bak
   ============================================================ */
.ftx{
  --ftx-paper:#ECE8DF; --ftx-paper2:#E3DED3; --ftx-card:#F3F0E9;
  --ftx-ink:#17140F; --ftx-ink2:#39342B; --ftx-muted:#6F685C;
  --ftx-line:#D7D1C4; --ftx-line2:#C5BDAC;
  --ftx-brand:#C1121F;
  --ftx-hbg:#121110; --ftx-hink:#F1ECE2; --ftx-hmuted:#9E9686; --ftx-hline:#39332A; --ftx-hbrand:#E23B2C;
  --ftx-disp:var(--disp,"Archivo FT","Archivo",Arial,sans-serif);
  --ftx-mono:var(--mono,"Plex Mono FT","IBM Plex Mono",monospace);
  --ftx-body:var(--sans,"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif);
  --ftx-maxw:1180px;
  font-family:var(--ftx-body);color:var(--ftx-ink);line-height:1.5;
}
/* diseno de una sola cara (claro + heroe oscuro), coherente con el resto del sitio (solo claro) */
.ftx *{box-sizing:border-box}
.ftx .ft-num{color:inherit;-webkit-text-fill-color:currentColor;background:none}
.ftx-wrap{max-width:var(--ftx-maxw);margin:0 auto;padding-inline:clamp(18px,5vw,56px)}
.ftx h1,.ftx h2,.ftx h3,.ftx h4{font-family:var(--ftx-disp);margin:0;line-height:1.03;text-wrap:balance;letter-spacing:-.01em;color:var(--ftx-ink)}
.ftx-eye{font-family:var(--ftx-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ftx-muted);margin:0}
.ftx-idx{font-family:var(--ftx-mono);font-size:12px;letter-spacing:.18em;color:var(--ftx-brand)}
.ftx-btn{font-family:var(--ftx-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:14px 22px;border:1px solid transparent;display:inline-flex;align-items:center;gap:10px;transition:transform .12s,background .15s,color .15s;cursor:pointer;text-decoration:none}
.ftx-btn:active{transform:translateY(1px)}
.ftx-btn.red{background:var(--ftx-brand);color:#fff;font-weight:600}
.ftx-btn.red:hover{background:#d41a28;color:#fff}
.ftx-btn.ghost{border-color:#4a443a;color:var(--ftx-hink)}
.ftx-btn.ghost:hover{border-color:var(--ftx-hink);color:var(--ftx-hink)}
.ftx-btn.outline{border-color:var(--ftx-line2);color:var(--ftx-ink)}
.ftx-cta{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0}
.ftx-hero{background:var(--ftx-hbg);color:var(--ftx-hink);position:relative;overflow:hidden}
.ftx-hero-media{position:absolute;inset:0;z-index:0}
.ftx-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22;transform:scale(1.06)}
.ftx-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.ftx-hero-video.on{opacity:.38}
.ftx-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,.88),rgba(12,11,9,.74) 42%,rgba(8,7,6,.97)),linear-gradient(90deg,rgba(9,8,7,.92),rgba(9,8,7,.5) 62%,rgba(9,8,7,.66))}
.ftx-hero-glow{position:absolute;right:-16%;top:0;width:52vw;height:52vw;max-width:680px;max-height:680px;pointer-events:none;filter:blur(40px);background:radial-gradient(circle at center,rgba(226,59,44,.2),rgba(226,59,44,.05) 42%,transparent 66%)}
.ftx-hero-inner{position:relative;z-index:1;padding-block:clamp(54px,9vw,104px) clamp(30px,5vw,46px)}
.ftx-hero .ftx-eye{color:var(--ftx-hmuted)}
.ftx-hero .ftx-eye b{color:var(--ftx-hbrand);font-weight:500}
.ftx .ftx-hero-h{font-weight:900;font-size:clamp(40px,7.6vw,94px);letter-spacing:-.025em;line-height:1.0;margin:22px 0 0;max-width:16ch;color:var(--ftx-hink);text-shadow:0 2px 30px rgba(0,0,0,.55)}
.ftx-hero-h .hl{color:var(--ftx-hbrand)}
.ftx-lede{max-width:52ch;margin:26px 0 0;font-size:clamp(16px,1.9vw,19px);color:#D9D2C6;line-height:1.55}
.ftx-specs{position:relative;z-index:1;border-top:1px solid var(--ftx-hline)}
.ftx-specs .ftx-wrap{display:grid;grid-template-columns:repeat(5,1fr)}
.ftx-specs .s{padding:22px 10px 24px 0;border-right:1px solid var(--ftx-hline)}
.ftx-specs .s:last-child{border-right:none}
.ftx-specs .s b{display:block;font-family:var(--ftx-disp);font-weight:800;font-size:clamp(22px,3vw,34px);color:var(--ftx-hink);line-height:1}
.ftx-specs .s b .u{color:var(--ftx-hbrand)}
.ftx-specs .s span{display:block;margin-top:9px;font-family:var(--ftx-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ftx-hmuted);line-height:1.4}
@media(max-width:760px){.ftx-specs .ftx-wrap{grid-template-columns:repeat(2,1fr)}.ftx-specs .s{border-right:none;border-bottom:1px solid var(--ftx-hline);padding-right:10px}.ftx-specs .s:nth-child(odd){border-right:1px solid var(--ftx-hline)}}
.ftx-band{padding-block:clamp(56px,8vw,100px);background:var(--ftx-paper)}
.ftx-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,46px)}
.ftx-hd h2{font-weight:800;font-size:clamp(28px,4.4vw,52px);letter-spacing:-.02em;max-width:18ch;margin-top:10px}
.ftx-hd p{max-width:40ch;color:var(--ftx-muted);font-size:15px;margin:0}
.ftx-fam{border-top:2px solid var(--ftx-ink)}
.ftx-fam-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,44px);align-items:start;padding:clamp(22px,3vw,34px) clamp(8px,1.5vw,16px);border-bottom:1px solid var(--ftx-line);color:inherit;text-decoration:none;transition:background .15s}
.ftx-fam-row:hover{background:var(--ftx-card)}
.ftx-fam-row .n{font-family:var(--ftx-disp);font-weight:800;font-size:clamp(30px,4vw,50px);color:var(--ftx-brand);line-height:.9;font-variant-numeric:tabular-nums}
.ftx-fam-row h3{font-weight:700;font-size:clamp(20px,2.4vw,27px);letter-spacing:-.01em}
.ftx-fam-row .desc{color:var(--ftx-muted);margin:8px 0 0;max-width:46ch;font-size:15px}
.ftx-fam-row .codes{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:7px}
.ftx-chip{font-family:var(--ftx-mono);font-size:11px;letter-spacing:.04em;color:var(--ftx-ink2);background:var(--ftx-card);border:1px solid var(--ftx-line);padding:4px 9px}
.ftx-fam-row:hover .ftx-chip{background:var(--ftx-paper)}
.ftx-fam-row .cnt{text-align:right;white-space:nowrap}
.ftx-fam-row .cnt b{font-family:var(--ftx-disp);font-weight:800;font-size:clamp(26px,3vw,38px);line-height:1;font-variant-numeric:tabular-nums;color:var(--ftx-ink)}
.ftx-fam-row .cnt span{display:block;font-family:var(--ftx-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ftx-muted);margin-top:6px}
.ftx-fam-row:hover .cnt span{color:var(--ftx-brand)}
@media(max-width:640px){.ftx-fam-row{grid-template-columns:auto 1fr}.ftx-fam-row .cnt{grid-column:2;text-align:left;margin-top:6px}.ftx-fam-row .cnt b{font-size:22px}}
.ftx-eng{background:var(--ftx-hbg);color:var(--ftx-hink);position:relative;overflow:hidden}
.ftx-eng::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 120% at 100% 0%,rgba(226,59,44,.17),transparent 55%)}
.ftx-eng .ftx-wrap{position:relative}
.ftx-eng .ftx-idx{color:var(--ftx-hbrand)}
.ftx-eng h2{color:var(--ftx-hink);font-weight:900;font-size:clamp(30px,5.2vw,62px);letter-spacing:-.025em;max-width:16ch;margin:16px 0 0}
.ftx-eng h2 em{font-style:normal;color:var(--ftx-hbrand)}
.ftx-eng p{max-width:56ch;color:#D7D0C4;margin:22px 0 0;font-size:clamp(15px,1.7vw,18px);line-height:1.6}
.ftx-eng-foot{display:flex;flex-wrap:wrap;gap:12px 28px;margin:30px 0 0;font-family:var(--ftx-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ftx-hmuted)}
.ftx-eng-foot b{color:var(--ftx-hink);font-weight:500}
.ftx-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ftx-line);border:1px solid var(--ftx-line)}
.ftx-steps .st{background:var(--ftx-paper);padding:clamp(20px,2.4vw,28px)}
.ftx-steps .st .k{font-family:var(--ftx-mono);font-size:11px;letter-spacing:.16em;color:var(--ftx-brand)}
.ftx-steps .st h4{font-weight:700;font-size:18px;margin:12px 0 0;letter-spacing:-.01em;font-family:var(--ftx-disp)}
.ftx-steps .st p{color:var(--ftx-muted);font-size:14px;margin:8px 0 0;line-height:1.5}
@media(max-width:820px){.ftx-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.ftx-steps{grid-template-columns:1fr}}
.ftx-person-band{background:var(--ftx-paper2)}
.ftx-person{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,64px);align-items:center}
.ftx-person .big b{font-family:var(--ftx-disp);font-weight:900;font-size:clamp(60px,12vw,140px);line-height:.82;letter-spacing:-.03em;color:var(--ftx-brand);display:block;font-variant-numeric:tabular-nums}
.ftx-person .big span{font-family:var(--ftx-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ftx-muted);display:block;margin-top:10px;max-width:22ch}
.ftx-person .who h2{font-weight:800;font-size:clamp(24px,3.2vw,38px);letter-spacing:-.02em;max-width:16ch}
.ftx-person .who p{color:var(--ftx-ink2);margin:16px 0 0;max-width:46ch;line-height:1.6}
.ftx-person .who .sig{font-family:var(--ftx-mono);font-size:13px;color:var(--ftx-ink);margin-top:18px;letter-spacing:.02em}
.ftx-person .who .sig b{color:var(--ftx-brand)}
@media(max-width:720px){.ftx-person{grid-template-columns:1fr}}
.ftx-end{border-top:2px solid var(--ftx-ink)}
.ftx-end h2{font-weight:900;font-size:clamp(30px,5.6vw,64px);letter-spacing:-.025em;max-width:16ch;margin-top:14px}
.ftx-end .sub{color:var(--ftx-muted);max-width:50ch;margin:18px 0 0}
.ftx-end-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:28px 0 0}
.ftx-tel{font-family:var(--ftx-disp);font-weight:800;font-size:clamp(24px,3vw,34px);letter-spacing:.01em;margin-left:6px;color:var(--ftx-ink);text-decoration:none}
@media(prefers-reduced-motion:reduce){.ftx *{animation:none!important;transition:none!important}}

/* --- pie a juego con la portada (claro, dosier) --- */
.ft-pie{border-top:2px solid #C1121F !important;background:#ECE8DF !important}
.ft-pie .ft-env{padding-block:clamp(44px,6vw,62px) 26px}
.ft-pie-brand{display:flex;align-items:baseline;gap:14px 22px;flex-wrap:wrap;padding-bottom:clamp(24px,4vw,38px);margin-bottom:clamp(24px,4vw,38px);border-bottom:1px solid #D7D1C4}
.ft-pie-brand .bm{display:inline-flex;align-items:baseline;gap:9px;line-height:1}
.ft-pie-brand .b1{font-family:var(--disp);font-weight:800;font-size:25px;color:#C1121F;letter-spacing:.005em}
.ft-pie-brand .b2{font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.42em;color:#17140F}
.ft-pie-claim{flex:1 1 300px;min-width:230px;font-size:12.5px;color:#6F685C;line-height:1.6;max-width:66ch}
.ft-pie .ft-pie-tel{font-family:var(--disp) !important;font-weight:800;font-size:clamp(22px,2.4vw,27px);color:#17140F !important;letter-spacing:.01em}

/* --- botones coherentes (dosier) en TODA la web: gana al tema warehouse --- */
#wrapper .btn-primary,.ftx .btn-primary,body .btn.btn-primary{background:var(--verde) !important;background-image:none !important;border:1px solid var(--verde) !important;color:#fff !important;border-radius:2px !important;box-shadow:none !important}
#wrapper .btn-primary:hover,.ftx .btn-primary:hover,body .btn.btn-primary:hover{background:var(--verde-hover) !important;background-image:none !important;border-color:var(--verde-hover) !important;color:#fff !important}
.btn,a.btn,button.btn,.btn-secondary,.btn-outline-primary{border-radius:2px !important}
.btn-secondary,.btn-outline-primary{border:1px solid var(--verde) !important;color:var(--verde) !important;background:transparent !important}
.btn-secondary:hover,.btn-outline-primary:hover{background:var(--verde) !important;color:#fff !important}

/* Fornituras Textiles · Experiencia editorial 2027. Complements the existing theme. */
:root{--papel:#f7f6f2;--hoja:#fff;--tinta:#222321;--tinta-70:#555650;--tinta-55:#666760;--linea:#deded7;--linea-fuerte:#d2d3cb;--verde:#bd2731;--verde-hover:#991b25;--rojo:#bd2731;--banda:#242723;--verde-claro:#f3898e;--bs-primary-rgb:189,39,49;--bs-link-color-rgb:189,39,49}
html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:#f7f6f2!important;color:#222321}::selection{background:#bd2731;color:white}
#header{border:0!important;background:#fff!important}#header .header-nav{display:none!important}#desktop-header{background:#fff}#desktop-header .header-top{padding:16px 0!important;transform:none!important;border:0!important;background:#fff!important}#desktop_logo img.logo{max-height:53px!important}.header-logo img{max-height:53px!important}#header .header-top .container{max-width:1440px;padding-inline:38px}#search_widget .form-control{background:#f7f6f2!important;border:1px solid #deded7!important;font:14px var(--sans)!important;letter-spacing:0!important;min-height:44px!important}#search_widget .form-control::placeholder{text-transform:none!important;letter-spacing:0!important}#search_widget .search-btn{background:#262923!important;border-color:#262923!important;min-height:44px!important}#user_info a{font:12px var(--sans)!important;letter-spacing:.02em!important;text-transform:none!important;color:#333!important;--ft-enlace:#333}
.ft-nav{background:white!important;border:0!important;border-top:1px solid #eeeeea!important;border-bottom:1px solid #deded7!important}.ft-nav .ft-env{max-width:1440px;padding-inline:38px}.ft-nav-lista{gap:30px}.ft-nav-lista>li{border:0!important}.ft-nav-lista>li>a{font:500 14px var(--sans)!important;text-transform:none!important;letter-spacing:0!important;padding:18px 0!important;color:#333!important;--ft-enlace:#333}.ft-nav-lista>.ft-nav-cta>a{background:#bd2731!important;color:white!important;--ft-enlace:white;padding:18px 27px!important}.ft-nav-panel{border-color:#deded7}.ft-nav-lista>li>a:hover{color:#bd2731!important}.ft-nav-panel a{--ft-enlace:#222}.ft-nav-pie{color:#555}.ft-nav-lista>.ft-nav-cta>a:hover{color:white!important;background:#991b25!important}
#index #wrapper{padding-top:0!important}#index #main>.page-content{margin-bottom:0}#index #content-wrapper,#index #inner-wrapper{padding:0!important;margin:0!important}#index #wrapper>.container{max-width:none!important;padding:0!important}#index #main{margin:0!important}#index #content{margin:0!important;padding:0!important}.ft27{font:16px/1.65 var(--sans);color:#222321;overflow:clip}.ft27 *{box-sizing:border-box}.ft27 p{max-width:none}.ft27 h1,.ft27 h2,.ft27 h3{color:#222321;font-family:var(--disp);text-wrap:initial}.ft27 a{text-decoration:none!important}.ft27 [hidden]{display:none!important}.ft27 button{font-family:inherit}.ft27-eyebrow{font:500 10px/1.5 var(--mono)!important;letter-spacing:.14em;text-transform:uppercase;color:#656760;margin:0 0 27px!important}.ft27-dot{display:inline-block;width:7px;height:7px;background:#bd2731;margin-right:8px;border-radius:50%}.ft27-hero{display:grid;grid-template-columns:1fr 1fr;min-height:640px;background:#f7f6f2;max-width:1680px;margin:auto}.ft27-hero-copy{padding:65px 45px 40px max(42px,calc((100vw - 1360px)/2));display:flex;flex-direction:column;align-items:flex-start}.ft27 .ft27-hero h1{font-size:clamp(58px,6.35vw,98px)!important;line-height:.98;letter-spacing:-.065em;font-weight:500;margin:0 0 28px!important}.ft27-hero h1 em{font-style:normal!important;color:#bd2731}.ft27-intro{max-width:440px!important;font-size:17px;line-height:1.7;color:#5a5d55;margin-bottom:27px}.ft27-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.ft27-button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:54px;padding:15px 22px;background:#bd2731;color:white!important;--ft-enlace:white!important;border:1px solid #bd2731;border-radius:2px!important;font:600 14px/1.5 var(--sans)!important;text-transform:none!important;letter-spacing:0!important;text-decoration:none!important;transition:background .2s,transform .2s;cursor:pointer;box-shadow:none!important}.ft27-button:hover{background:#991b25;color:white!important;transform:translateY(-2px)}.ft27-button span{font-size:21px;font-weight:400;line-height:1}.ft27-button-light{background:#fff;border-color:#fff;color:#222!important;--ft-enlace:#222!important}.ft27-button-light:hover{background:#ecebe5;color:#222!important}.ft27-button-outline{background:transparent;color:#222!important;--ft-enlace:#222!important;border-color:#aaa}.ft27-button-outline:hover{background:#efeee8;color:#222!important}.ft27-link{font:600 14px/1.5 var(--sans);color:#222!important;--ft-enlace:#222!important;display:inline-flex;align-items:center;gap:20px;border-bottom:1px solid #babdb2;padding-bottom:5px}.ft27-link:hover{color:#bd2731!important;--ft-enlace:#bd2731!important;border-color:#bd2731}.ft27-link span{font-size:20px}.ft27-hero-note{margin-top:auto;padding-top:35px;display:flex;align-items:center;gap:12px;font-size:12px;color:#6c6d65}.ft27-line{height:1px;width:38px;background:#a9ada1}.ft27-hero-art{margin:0;position:relative;min-width:0;overflow:hidden;background:#30322e}.ft27-hero-art>img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:60% center}.ft27-hero-art figcaption{position:absolute;top:25px;left:28px;right:28px;display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:.07em;color:#f4f3ee}.ft27-art-link{position:absolute;left:26px;bottom:25px;right:26px;display:flex;align-items:center;justify-content:space-between;background:#f7f6f2;padding:22px 25px;color:#252824!important;--ft-enlace:#252824;font:500 17px/1.4 var(--disp)}.ft27-art-link b{font-size:28px;font-weight:400}.ft27-servicebar{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);padding:31px 40px 34px;border-bottom:1px solid #deded7;gap:25px}.ft27-servicebar>div{display:flex;flex-direction:column;border-right:1px solid #deded7}.ft27-servicebar>div:last-child{border:0}.ft27-servicebar b{font:500 26px var(--disp);letter-spacing:-.04em}.ft27-servicebar span{font:12px var(--sans);color:#666b61;margin-top:7px}.ft27-section{max-width:1440px;margin:auto;padding:100px 40px}.ft27-section-head{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:end;margin-bottom:48px}.ft27 h2{font-size:clamp(33px,3.5vw,53px);line-height:1.08;letter-spacing:-.045em;font-weight:500;margin:0}.ft27-section-head>p,.ft27-section-head>div>p:not(.ft27-eyebrow){font-size:16px;color:#64675e;max-width:440px;margin:0 0 19px}.ft27-families{display:grid;grid-template-columns:repeat(3,1fr);gap:27px}.ft27-family{--ft-enlace:#222!important;color:#222!important;min-width:0}.ft27-family-image{aspect-ratio:1.09;position:relative;overflow:hidden;background:#e9e8e2}.ft27-family-image>img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.65,.3,1)}.ft27-clothing>img,.ft27-laundry>img{object-fit:contain;mix-blend-mode:multiply;padding:18px}.ft27-family:hover img{transform:scale(1.045)}.ft27-index{position:absolute;top:18px;left:18px;font:11px var(--mono);background:#fff;padding:6px 9px}.ft27-circle{position:absolute;right:17px;bottom:17px;border-radius:50%;background:#fff;color:#222;width:42px;height:42px;display:grid;place-items:center;font-size:24px;transition:background .2s,color .2s}.ft27-family:hover .ft27-circle{background:#bd2731;color:white}.ft27-family-copy{padding:25px 0 5px;border-bottom:1px solid #d7d8d0}.ft27-family h3{font-size:30px;line-height:1.05;letter-spacing:-.04em;font-weight:500;margin:0 0 15px}.ft27-family p{font-size:14px;color:#60655a;line-height:1.65;min-height:70px;margin-bottom:24px}.ft27-family-copy>span{font:10px var(--mono);letter-spacing:.09em;display:block;margin:0 0 20px}.ft27-engineering{display:grid;grid-template-columns:1fr 1fr;background:#262923;color:#fff;max-width:1680px;margin:auto}.ft27-engineering-image{position:relative;overflow:hidden;min-height:620px}.ft27-engineering-image img{height:100%;width:100%;object-fit:cover;position:absolute;object-position:44% center}.ft27-image-label{position:absolute;bottom:25px;left:25px;background:#f8f7f1;color:#30332c;font:9px var(--mono);letter-spacing:.11em;padding:12px}.ft27-engineering-copy{padding:70px max(42px,calc((100vw - 1360px)/2)) 66px 65px}.ft27-engineering .ft27-eyebrow{color:#c2c8b8}.ft27-engineering h2{color:#fff;font-size:clamp(36px,4.25vw,64px)}.ft27-engineering p{color:#c7cbbf;font-size:15px}.ft27-engineering .ft27-engineering-lead{font-size:21px;color:#fff;margin-top:25px;margin-bottom:15px}.ft27-tags{display:flex;flex-wrap:wrap;gap:8px;margin:23px 0 30px}.ft27-tags>span{border:1px solid #53594c;padding:7px 11px;font:11px var(--sans);color:#d6dacd}.ft27-engineering small{display:block;font-size:11px;color:#bec4b4;margin-top:15px}.ft27-sector-tabs{display:flex;border-bottom:1px solid #c9cdc0;gap:35px;margin:0}.ft27-sector-tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:18px 0;color:#6b7162;text-align:left;font-size:17px;flex:1;display:flex;justify-content:space-between;gap:12px;cursor:pointer}.ft27-sector-tabs button[aria-selected=true]{border-bottom-color:#bd2731;color:#222}.ft27-sector-tabs span{font:10px var(--mono);margin-top:5px}.ft27-sector-panel{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;margin-top:40px;align-items:center}.ft27-sector-visual{height:410px;position:relative;overflow:hidden;background:#ebece5}.ft27-sector-visual img{width:100%;height:100%;object-fit:cover}.ft27-sector-visual:has(img[src*=catalog]) img{object-fit:contain;mix-blend-mode:multiply;padding:20px}.ft27-sector-visual>span{position:absolute;bottom:20px;left:20px;right:20px;background:#fff;padding:12px 16px;font:10px var(--mono);letter-spacing:.06em}.ft27-sector-info h3{font-size:39px;line-height:1.12;letter-spacing:-.045em;font-weight:500;margin-bottom:23px}.ft27-sector-info p{font-size:15px;color:#63685b}.ft27-sector-info ul{list-style:none;padding:0;margin:22px 0}.ft27-sector-info li{font-size:14px;padding:9px 0;border-bottom:1px solid #dddfd5}.ft27-sector-info li:before{content:'↗';color:#bd2731;margin-right:11px}.ft27-method{background:#eaece5}.ft27-process{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.ft27-process article{border-top:1px solid #aeb6a4;padding-top:20px}.ft27-process article>span{font:11px var(--mono);color:#bd2731}.ft27-process h3{font-size:23px;letter-spacing:-.035em;margin:28px 0 12px}.ft27-process p{font-size:15px;color:#606857}.ft27-method-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:38px;border-top:1px solid #c7cebd;padding-top:32px}.ft27-method-bottom p{font-size:13px;max-width:500px;margin:0}.ft27-method-bottom b{display:block;font-size:15px;margin-bottom:5px}.ft27-about{display:grid;grid-template-columns:1.2fr 1fr;gap:90px;border-bottom:1px solid #ddd}.ft27-about h2 span{color:#bd2731}.ft27-about-copy p{font-size:15px;color:#606657}.ft27-about-copy .ft27-large-text{font-size:23px;line-height:1.45;color:#252923;margin-bottom:24px}.ft27-faq{display:grid;grid-template-columns:1fr 1.4fr;gap:80px}.ft27-faq>div>p:not(.ft27-eyebrow){font-size:15px;color:#606657;margin-top:24px;max-width:300px}.ft27-questions details{border-bottom:1px solid #d3d7c9}.ft27-questions details:first-child{border-top:1px solid #d3d7c9}.ft27-questions summary{font-size:16px;cursor:pointer;padding:21px 32px 21px 0;list-style:none;position:relative}.ft27-questions summary::-webkit-details-marker{display:none}.ft27-questions summary:after{content:'+';position:absolute;right:3px;top:17px;font-size:24px;color:#bd2731}.ft27-questions details[open] summary:after{content:'−'}.ft27-questions details p{font-size:14px;color:#626956;margin:0;padding-bottom:22px;max-width:560px}.ft27-contact{background:#b52832;color:#fff;display:grid;grid-template-columns:1.2fr 1fr;gap:80px;padding:72px max(40px,calc((100vw - 1360px)/2));max-width:1680px;margin:auto;align-items:center}.ft27-contact h2{font-size:clamp(45px,5.1vw,75px);color:white;letter-spacing:-.055em}.ft27-contact .ft27-eyebrow{color:#f8dce0}.ft27-contact p{font-size:18px;line-height:1.6}.ft27-contact-phone{display:block;margin-top:24px;font-size:23px;color:white!important;--ft-enlace:white!important}.ft-pie{background:#242723!important;color:#fff;padding-block:65px!important}.ft-pie .ft-rot,.ft-pie-claim,.ft-pie address{color:#c1c7b6!important}.ft-pie a{color:#eff1eb!important;--ft-enlace:#eff1eb!important}.ft-pie .bm .b1{color:#fff}.ft-pie .bm .b2{color:#d3d7cb}.ft-pie-brand{border-color:#474d3e!important}.ft-pie-cols{padding-top:35px}.ft-pie .ft-legal{color:#c1c7b6;border-color:#474d3e}.ft-pie .ft-env{max-width:1440px;padding-inline:40px}
/* Catalog, product and forms share the same visual system. */
.btn.btn-primary{background:#bd2731!important;border-color:#bd2731!important;color:white!important;border-radius:2px!important;box-shadow:none!important;text-transform:none!important;font:600 14px var(--sans)!important;letter-spacing:0!important;padding:16px 22px!important;transition:background .2s}.btn-primary:before,.btn-primary:after{display:none!important}.btn.btn-primary:hover{background:#991b25!important}.btn.ft-btn-sec{border-radius:2px!important;font:500 14px var(--sans)!important;text-transform:none!important;letter-spacing:0!important;border:1px solid #aaa;padding:15px 18px!important;color:#333!important;background:transparent!important}.ft-franja{background:#eeefe9;border:0;padding:0}.ft-franja-texto{font-size:17px;padding:27px 30px}.ft-franja-datos{border-color:#d6dacc}.ft-franja-datos>div{padding:22px 27px}.ft-franja .ft-franja-cifra{color:#bd2731}.ft-franja-precio{font-size:14px}#category #main h1{font-size:clamp(32px,3.6vw,55px);letter-spacing:-.045em}#products .products.products-grid{gap:22px;padding:0}#products .products-grid>.js-product-miniature-wrapper{border:0;background:transparent;margin:0}#products .product-miniature{background:transparent!important}#products .product-miniature .thumbnail-container{aspect-ratio:1/1.12;border:0;background:#ecece6}#products .product-miniature .product-thumbnail img{object-fit:contain;padding:12px;mix-blend-mode:multiply;transition:transform .5s}#products .product-miniature:hover .product-thumbnail img{transform:scale(1.03)}#products .product-miniature .product-description{padding:18px 0 22px;border-bottom:1px solid #ddd}#products .product-miniature .product-title{font:500 18px/1.25 var(--disp)!important;letter-spacing:-.025em!important}#products .product-miniature::before{display:none}#products .product-miniature .product-reference{font-size:10px!important;color:#6c7163!important}#product .col-product-info h1{font-size:clamp(30px,3vw,46px);line-height:1.1;letter-spacing:-.045em}#product .product-description-short{font-size:16px}.ft-fichatec{background:#f0f1ea;border:0;padding:22px 25px;margin-top:25px}.ft-fichatec>div{border-color:#d9dccf}.ft-precio-ficha{background:#fff;border:1px solid #deded7;padding:26px}.ft-precio-ficha .valor{font-size:23px;letter-spacing:-.03em}.ft-precio-ficha p{font-size:14px}.ft-pie-ficha .ft-rot{font:11px/1.6 var(--sans);text-transform:none;letter-spacing:0}.ft27-add-selection{padding:22px 0;margin-top:15px;border-top:1px solid #ddd}.ft27-add-selection label{font:12px var(--sans);display:block;margin-bottom:10px}.ft27-add-selection>div{display:flex;gap:10px}.ft27-add-selection input{width:86px;border:1px solid #aaa;background:white;text-align:center;border-radius:2px;font-size:16px}.ft27-add-selection p{font:12px var(--sans);color:#636a58;margin:10px 0}.ft-solicitud-cab{background:#eaece5;padding:65px 0 55px;border:0}.ft-solicitud-cab h1{max-width:780px;font-size:clamp(36px,4.5vw,64px);letter-spacing:-.05em;line-height:1.06}.ft-solicitud-cab .ft-entrada{font-size:18px;max-width:630px}.ft-solicitud-cuerpo{padding-top:45px}.ft-bloque{background:#fff!important;padding:28px!important;border-color:#deded7!important}.ft-bloque legend{font:500 22px var(--disp);letter-spacing:-.03em}.ft-campo label{font:500 12px var(--sans);letter-spacing:0;text-transform:none}.ft-campo input:not([type=checkbox]):not([type=file]),.ft-campo select,.ft-campo textarea{background:#fafbf7;border:1px solid #bec4b5;border-radius:2px;font:15px var(--sans);min-height:47px}.ft-campo textarea{line-height:1.6;padding:15px}.ft-ayuda{font:12px/1.5 var(--sans);color:#636a58}.ft-solicitud-lado{background:#282d23!important;color:white}.ft-solicitud-lado .ft-rot{color:#d8dece}.ft-solicitud-lado li{color:#e2e7da!important;font-size:14px}.ft-solicitud-lado .ft-nota{color:#d8dece}.ft-form-rejilla{gap:16px!important;border:0!important}.ft-form-cierre{margin-top:25px}.ft-form-progress{display:flex;gap:8px;margin-bottom:23px;grid-column:1/-1}.ft-form-progress button{flex:1;text-align:left;background:#eeefe9;border:0;border-bottom:2px solid #ccd2c1;padding:14px 12px;font:13px var(--sans);color:#626959}.ft-form-progress button[aria-current=step]{border-color:#bd2731;color:#222;background:#fff}.ft-form.ft-stepped .ft-form-rejilla{display:block}.ft-form.ft-stepped .ft-bloque[hidden]{display:none}.ft-form.ft-stepped .ft-form-cierre[hidden]{display:none}.ft-form-step-actions{display:flex;justify-content:space-between;gap:15px;margin-top:18px}.ft-form-step-actions button{min-height:48px}.ft27-selection-button{position:fixed;bottom:20px;right:25px;z-index:1050;background:#262923;color:white;border:1px solid #72776a;border-radius:3px;padding:15px 19px;box-shadow:0 5px 25px #0002;font:600 13px var(--sans);cursor:pointer}.ft27-selection-button[hidden]{display:none}.ft27-selection-dialog{border:0;padding:0;width:min(600px,calc(100% - 30px));max-height:85vh;background:#f7f6f2;color:#222;box-shadow:0 20px 80px #0005}.ft27-selection-dialog::backdrop{background:#18201799}.ft27-selection-inner{padding:30px}.ft27-selection-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.ft27-selection-header h2{font-size:28px;margin:0}.ft27-selection-header button{background:none;border:1px solid #ccc;padding:8px 12px;font:13px var(--sans)}.ft27-selection-row{display:grid;grid-template-columns:1fr 80px 35px;gap:12px;align-items:center;padding:15px 0;border-top:1px solid #ddd;font:14px var(--sans)}.ft27-selection-row small{display:block;color:#6b7163;font-size:10px;margin-top:5px}.ft27-selection-row input{width:80px;min-height:42px;background:white;border:1px solid #bbb;text-align:center}.ft27-selection-row button{background:none;border:0;font-size:21px;color:#bd2731}.ft27-selection-dialog .ft27-button{margin-top:20px;width:100%}.ft27-selection-dialog p{font:13px/1.5 var(--sans);margin-bottom:0}.ft27-selection-summary{background:#f0f1ea;padding:14px 18px;font:13px var(--sans);margin-bottom:20px;border-left:3px solid #bd2731}.ft27 a:focus-visible,.ft27 button:focus-visible,.ft27-selection-dialog button:focus-visible{outline:3px solid #bd2731;outline-offset:4px}
@media(min-width:1600px){.ft27-hero-copy{padding-left:70px}.ft27-engineering-copy{padding-right:70px}}
@media(max-width:1100px){.ft27-hero-copy{padding:45px 30px}.ft27-hero{min-height:610px}.ft27-hero h1{font-size:70px!important}.ft27-actions{gap:18px}.ft27-engineering-copy{padding:50px 35px}.ft27-section-head,.ft27-about{gap:40px}.ft27-sector-panel{gap:35px}.ft27-family h3{font-size:26px}.ft27-family p{min-height:94px}.ft-nav-lista{gap:22px}.ft-nav .ft-env{padding-inline:25px}.ft27-section{padding:75px 30px}}
@media(max-width:767px){html{scroll-padding-top:75px}.ft27-hero{grid-template-columns:1fr;min-height:0}.ft27-hero-copy{padding:36px 24px}.ft27 .ft27-hero h1{font-size:65px!important;line-height:1;letter-spacing:-.055em}.ft27-hero h1 br:nth-child(2){display:none}.ft27-hero h1 em:before{content:' '}.ft27-eyebrow{font-size:9px!important;margin-bottom:20px!important}.ft27-intro{font-size:16px;margin-bottom:23px}.ft27-hero-art{min-height:380px;max-height:450px}.ft27-hero-art figcaption{font-size:8px;left:20px;right:20px}.ft27-hero-note{padding-top:25px}.ft27-art-link{left:20px;right:20px;bottom:20px;padding:17px;font-size:15px}.ft27-servicebar{padding:28px 24px;grid-template-columns:1fr 1fr;gap:24px}.ft27-servicebar>div:nth-child(2){border:0}.ft27-servicebar b{font-size:23px}.ft27-servicebar span{font-size:11px}.ft27-section{padding:60px 24px}.ft27-section-head{grid-template-columns:1fr;gap:25px;margin-bottom:30px}.ft27 h2{font-size:36px}.ft27-families{grid-template-columns:1fr;gap:35px}.ft27-family-image{aspect-ratio:1.3}.ft27-family h3 br{display:none}.ft27-family h3{font-size:29px}.ft27-family p{min-height:0;max-width:420px;margin-bottom:20px}.ft27-family-copy{padding-top:20px}.ft27-family h3 br:after{content:' '}.ft27-engineering{grid-template-columns:1fr}.ft27-engineering-image{min-height:360px}.ft27-engineering-copy{padding:40px 24px 50px}.ft27-engineering h2{font-size:46px}.ft27-sector-tabs{gap:18px}.ft27-sector-tabs button{font-size:13px;align-items:center}.ft27-sector-tabs span{display:none}.ft27-sector-panel{grid-template-columns:1fr;gap:30px;margin-top:25px}.ft27-sector-visual{height:310px}.ft27-sector-info h3{font-size:34px}.ft27-process{grid-template-columns:1fr;gap:20px}.ft27-process h3{margin:12px 0}.ft27-method-bottom{align-items:flex-start;flex-direction:column}.ft27-about,.ft27-faq{grid-template-columns:1fr;gap:32px}.ft27-about-copy .ft27-large-text{font-size:21px}.ft27-contact{grid-template-columns:1fr;gap:30px;padding:50px 24px}.ft27-contact h2{font-size:53px}.ft27-contact p{font-size:16px}.ft-pie .ft-env{padding-inline:24px}.ft27-selection-button{bottom:16px;right:15px;padding:12px 16px}.ft27-add-selection>div{flex-wrap:wrap}.ft27-add-selection input{min-height:48px}.ft27-selection-inner{padding:22px}.ft27-selection-row{grid-template-columns:1fr 64px 25px;gap:8px}.ft27-selection-row input{width:64px}.ft-form-progress{gap:4px}.ft-form-progress button{font-size:11px;padding:12px 6px}.ft-franja-texto{padding:20px;font-size:15px}#products .products.products-grid{gap:16px}.ft-bloque{padding:22px!important}.ft-solicitud-cab{padding:40px 0}.ft27-button{min-height:50px;padding:13px 18px;font-size:13px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ft27 *,.ft27 *:before,.ft27 *:after{transition:none!important;animation:none!important}}
@media print{.ft27-selection-button,.ft27-selection-dialog,.ft-form-step-actions,.ft-form-progress{display:none!important}.ft-form.ft-stepped .ft-bloque[hidden],.ft-form.ft-stepped .ft-form-cierre[hidden]{display:block!important}}

.ft27-film{position:relative;min-height:470px;background:#dadfd1;overflow:hidden}.ft27-film video{width:100%;height:100%;position:absolute;object-fit:cover}.ft27-film>span{position:absolute;bottom:17px;left:20px;color:white;background:#252923cc;padding:7px 9px;font:8px var(--mono);letter-spacing:.08em}.ft27-film button{position:absolute;right:20px;top:20px;background:#fff;border:0;padding:11px 14px;font:12px var(--sans);color:#222;cursor:pointer}.ft27-about-copy h2{margin-bottom:28px}.ft27-about{align-items:center}.ft27-film video:focus-visible{outline:3px solid #bd2731}@media(max-width:767px){.ft27-film{min-height:340px}.ft27-about-copy h2{font-size:37px}}
.ft27-listinghead{display:grid;grid-template-columns:1fr 220px;min-height:225px;overflow:hidden;background:#eceee6;margin:25px 0 22px!important}.ft27-listingcopy{padding:27px 30px}.ft27-listingcopy .ft-franja-texto{padding:0;font:16px/1.6 var(--sans);color:#525b49}.ft27-listingcopy .ft-franja-texto p{margin:0}.ft27-catalog-meta{display:flex;gap:16px;align-items:center;font:12px var(--sans);color:#646c5a;margin:20px 0}.ft27-catalog-meta b{color:#bd2731}.ft27-listingvisual{position:relative;background:#e0e4d7;min-height:225px}.ft27-listingvisual img{width:100%;height:100%;object-fit:cover;position:absolute;mix-blend-mode:multiply}.ft27-listinghead .ft-franja-acciones{gap:20px;align-items:center;flex-wrap:wrap}.ft27-categorylinks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}.ft27-categorylinks a{font:12px var(--sans);color:#525b49!important;--ft-enlace:#525b49;border:1px solid #d4dacb;padding:10px 13px;border-radius:2px;text-decoration:none}.ft27-categorylinks a[aria-current=page],.ft27-categorylinks a:hover{background:#272d23;color:white!important;--ft-enlace:white;border-color:#272d23}.ft27-searchhead{padding:25px 30px;margin-bottom:25px}.ft-form.ft-stepped legend .ft-num{display:none}.ft27-button[hidden],.ft27-selection-dialog [hidden],.ft-form-step-actions [hidden]{display:none!important}.ft-form.ft-stepped .ft-bloque+.ft-bloque{margin-top:20px}@media(max-width:767px){.ft27-listinghead{grid-template-columns:1fr 100px;min-height:0}.ft27-listingcopy{padding:20px}.ft27-listingcopy .ft-franja-texto{font-size:14px}.ft27-listingvisual{min-height:100%}.ft27-catalog-meta{flex-direction:column;align-items:flex-start;gap:5px}.ft27-listingcopy .ft27-link{font-size:12px}.ft27-categorylinks a{font-size:11px;padding:9px}.ft27-listinghead .btn.btn-primary{font-size:12px!important;padding:12px!important}}
@media(max-width:991px){#mobile-header .col-mobile-logo img.logo{width:170px!important;max-width:100%!important;max-height:49px!important;height:auto!important}#mobile-header{background:white!important}#mobile-header .mobile-main-bar{padding-block:13px!important}}

/* FT / Entrelazado. Front-end identity and procurement presentation, October 2026. */
:root{--ft32-red:#a62b35;--ft32-ink:#242426;--ft32-cream:#f7f6f2;--verde:#a62b35;--rojo:#a62b35;--verde-hover:#86222c;--banda:#242426;--bs-primary-rgb:166,43,53}
#desktop-header,#desktop-header .header-top,#header{background:#f7f6f2!important}#desktop-header .header-top{padding:20px 0!important}#header .header-top .container{max-width:1520px;padding-inline:50px}#desktop_logo a{display:block}#desktop_logo img.logo{content:url('../img/ft-identidad.svg');width:296px!important;max-width:296px!important;height:68px!important;max-height:68px!important;object-fit:contain;object-position:left center}#desktop-header .col-header-center{display:flex;justify-content:flex-end;padding-left:50px}#desktop-header #search_widget{width:310px;max-width:100%;margin:0}#desktop-header #search_widget .form-control{background:transparent!important;border:0!important;border-bottom:1px solid #c9c7c1!important;padding-left:0;min-height:40px!important;font-size:13px!important}#desktop-header #search_widget .search-btn{background:none!important;color:#242426!important;border:0!important;border-bottom:1px solid #c9c7c1!important;min-height:40px!important}#desktop-header .col-header-right{margin-left:40px;padding:15px 0 15px 28px;border-left:1px solid #d5d3cd}#user_info a{color:#242426!important;--ft-enlace:#242426;font-size:12px!important}.ft32-brand-caption{font:10px/1.7 var(--mono);color:#68676a;letter-spacing:.1em;margin-left:32px;padding-left:30px;border-left:1px solid #d5d3cd;white-space:nowrap}.col-header-left{display:flex;align-items:center}#desktop-header .iqit-megamenu-container{max-width:none;padding:0;background:#242426}.ft-nav{background:#242426!important;border:0!important}.ft-nav .ft-env{max-width:1520px;padding-inline:50px}.ft-nav-lista{gap:42px;min-height:62px}.ft-nav-lista>li>a{color:#eceae5!important;--ft-enlace:#eceae5!important;font-size:13px!important;padding:22px 0!important}.ft-nav-lista>li>a:hover{color:#fff!important}.ft-nav-lista>.ft-nav-cta>a{background:transparent!important;padding:16px 0 16px 27px!important;border-left:1px solid #5c5b5b;color:#fff!important}.ft-nav-lista>.ft-nav-cta>a:after{content:'↗';display:inline-block;margin-left:40px;font-size:20px;color:#e28f96}.ft-nav-panel{top:100%;box-shadow:0 20px 40px #17171920}.ft-nav-panel a{color:#242426!important}.ft-nav-lista>.ft-nav-cta>a:hover{background:transparent!important;color:#efbfc4!important}.ft32-nav-label{font:9px var(--mono);letter-spacing:.1em;color:#a9a5a5;margin-left:auto;align-self:center}.ft32 .ft27-hero{max-width:1780px;min-height:690px;grid-template-columns:1.04fr 1fr;position:relative}.ft32 .ft27-hero-copy{padding:64px 60px 44px 90px;position:relative;z-index:2}.ft32 .ft27-hero h1{font-size:clamp(70px,6.55vw,112px)!important;line-height:.96;letter-spacing:-.063em;margin-bottom:34px!important}.ft32 .ft27-hero h1 em{color:var(--ft32-red)}.ft32 .ft27-intro{font-size:17px;max-width:490px!important;color:#656468}.ft32 .ft27-intro strong{display:block;font-size:19px;color:#242426;font-weight:500;margin-bottom:7px}.ft32 .ft27-eyebrow{letter-spacing:.15em;color:#69666b}.ft32 .ft27-hero .ft27-eyebrow{margin-bottom:30px!important}.ft32 .ft27-hero-art{margin:30px 28px 30px 0;min-height:640px;border-radius:2px 95px 2px 2px}.ft32 .ft27-hero-art>img{object-position:56% center;transform:scale(1.03)}.ft32 .ft27-hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0b0b0d00 45%,#0b0b0d50);pointer-events:none}.ft32 .ft27-hero-art figcaption{z-index:2;right:45px;color:#fff;font-size:9px}.ft32 .ft27-art-link{background:#f7f6f2ed;backdrop-filter:blur(12px);bottom:24px;left:24px;right:24px;z-index:3;padding:24px 28px;font-size:22px;line-height:1.2;border-top:2px solid #a62b35}.ft32 .ft27-art-link small{font:8px var(--mono);letter-spacing:.12em;display:block;color:#777078;margin-bottom:10px}.ft32-material-note{position:absolute;top:26%;left:35px;color:white;display:flex;align-items:center;gap:14px;z-index:2;font:8px/1.6 var(--mono);letter-spacing:.08em;text-shadow:0 1px 5px #0009}.ft32-material-note b{font:12px var(--sans);letter-spacing:0}.ft32-cross{font:30px var(--sans);font-weight:300;color:#e7b4b9}.ft32-thread{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.6}.ft32-thread path{stroke:#e5a6aa;stroke-width:.65;stroke-dasharray:1400;stroke-dashoffset:1400;animation:ft32-draw 4s ease-out .25s forwards}.ft32-thread path+path{opacity:.55;animation-delay:.6s}@keyframes ft32-draw{to{stroke-dashoffset:0}}.ft32 .ft27-servicebar{max-width:1500px;padding:34px 50px 40px}.ft32 .ft27-servicebar b{font-size:24px;color:#2b292c}.ft32 .ft27-servicebar span{color:#706c71}.ft32 .ft27-section{max-width:1500px;padding:112px 50px}.ft32 h2 em{font-style:normal;color:var(--ft32-red)}.ft32-rail{position:fixed;left:22px;top:49%;display:flex;flex-direction:column;gap:17px;z-index:10}.ft32-rail a{display:flex;align-items:center;gap:10px;color:#8a858a!important;--ft-enlace:#8a858a;font:9px var(--mono);padding:4px}.ft32-rail a i{height:1px;width:13px;background:#aba6a6;transition:width .25s,background .25s}.ft32-rail a[aria-current=true]{color:#a62b35!important;--ft-enlace:#a62b35}.ft32-rail a[aria-current=true] i{width:28px;background:#a62b35}.ft32-service{position:relative}.ft32-service-heading h2{font-size:clamp(37px,4.1vw,62px);letter-spacing:-.045em;line-height:1.12}.ft32-service-heading h2 em{color:#8e898c}.ft32-service-bottom{display:grid;grid-template-columns:1.05fr 1fr;gap:110px;margin-top:45px}.ft32-service-bottom>p{font-size:18px;line-height:1.7;color:#666168;max-width:590px}.ft32-service-points{display:grid;gap:0}.ft32-service-points span{padding:14px 0;border-bottom:1px solid #d7d3d3;font-size:15px;color:#373136;display:flex;gap:25px}.ft32-service-points b{font:10px var(--mono);color:#a62b35;margin-top:5px}.ft32-supply-line{display:flex;align-items:center;gap:20px;margin-top:65px;font:9px var(--mono);letter-spacing:.1em;color:#777177}.ft32-supply-line i{flex:1;height:1px;background:linear-gradient(90deg,#d2caca,#a62b35);position:relative}.ft32-supply-line i:last-of-type{background:linear-gradient(90deg,#a62b35,#d2caca)}.ft32-supply-line i:after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;background:#a62b35;border-radius:50%}.ft32-workflow{background:#242426;color:#eeeae5;position:relative}.ft32-workflow:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:60px 60px;pointer-events:none}.ft32-workflow .ft27-section{position:relative}.ft32-workflow h2{color:#f4f1ec;font-size:clamp(36px,3.6vw,54px)}.ft32-workflow h2 em{color:#bbafb3}.ft32-workflow .ft27-eyebrow{color:#c49197}.ft32-workflow .ft27-section-head>p{color:#b6b1b5;max-width:390px}.ft32-workspace{display:grid;grid-template-columns:.8fr 1.3fr;gap:72px;align-items:center}.ft32-work-tabs{display:flex;flex-direction:column}.ft32-work-tabs button{display:flex;align-items:flex-start;gap:22px;width:100%;background:none;border:0;border-bottom:1px solid #4a454a;padding:29px 0;text-align:left;color:#9e959b;cursor:pointer}.ft32-work-tabs button>span{font:11px var(--mono);margin-top:5px}.ft32-work-tabs button b{display:block;font:500 25px/1.12 var(--disp);letter-spacing:-.03em;color:inherit}.ft32-work-tabs button small{display:block;font:13px/1.6 var(--sans);max-width:240px;margin-top:12px}.ft32-work-tabs button i{font-style:normal;margin-left:auto;font-size:24px;opacity:.25}.ft32-work-tabs button[aria-selected=true]{color:#f9f4ee;border-bottom-color:#bb6570}.ft32-work-tabs button[aria-selected=true]>span,.ft32-work-tabs button[aria-selected=true] i{color:#e6a1a9;opacity:1}.ft32-work-tabs button:focus-visible{outline:2px solid #d4a8ae;outline-offset:5px}.ft32-work-stage{background:#302e31;border:1px solid #514a50;padding:23px 30px 26px;min-width:0;box-shadow:0 30px 65px #0b0b0c35;position:relative}.ft32-stage-top{display:flex;justify-content:space-between;gap:20px;font:8px var(--mono);letter-spacing:.09em;color:#b2a8b0;margin-bottom:28px}.ft32-example{color:#e2a4ac}.ft32-demo{animation:ft32-stage-in .35s ease both;min-height:353px}.ft32-demo[hidden]{display:none!important}@keyframes ft32-stage-in{from{opacity:.15;transform:translateY(8px)}to{opacity:1;transform:none}}.ft32-paper{background:#f7f6f2;color:#333039;padding:27px 28px;transform:rotate(-1deg);box-shadow:7px 7px 0 #ffffff0a}.ft32-paper-title span{display:block;font:9px var(--mono);letter-spacing:.1em;color:#958189;margin-bottom:16px}.ft32-paper-title b{display:block;font:500 27px var(--disp);letter-spacing:-.04em;margin-bottom:25px}.ft32-paper table{width:100%;font:12px/1.5 var(--sans);border-collapse:collapse}.ft32-paper th{font:9px var(--mono);color:#80757d;text-transform:uppercase;text-align:left;padding:8px 0;border-bottom:1px solid #bdb2b8}.ft32-paper td{padding:12px 0;border-bottom:1px solid #e2dcdf}.ft32-paper td:last-child,.ft32-paper th:last-child{text-align:right}.ft32-file-note{display:flex;justify-content:space-between;gap:12px;font:9px var(--mono);color:#8d5660;margin-top:23px}.ft32-demo-caption{font:12px/1.6 var(--sans);color:#b9b2b8;max-width:560px;margin:25px 0 0;min-height:40px}.ft32-review{background:#f7f6f2;color:#272328;padding:24px 27px}.ft32-review-head{display:flex;align-items:center;gap:18px;border-bottom:1px solid #d9d0d3;padding-bottom:19px}.ft32-review-head small{display:block;font:8px var(--mono);color:#8d5761;margin-bottom:8px}.ft32-review-head b{display:block;font:500 21px/1.15 var(--disp);letter-spacing:-.03em}.ft32-review ul{list-style:none;margin:14px 0 0;padding:0}.ft32-review li{display:flex;justify-content:space-between;gap:22px;font:11px/1.5 var(--sans);padding:12px 0;border-bottom:1px solid #e1d8dc}.ft32-review li b{font-weight:500;text-align:right;color:#78656e;max-width:190px}.ft32-dispatch{background:#f7f6f2;color:#272328;padding:24px 27px;min-height:277px}.ft32-dispatch-label{display:flex;justify-content:space-between;gap:20px;align-items:start}.ft32-dispatch-label>span{font:8px var(--mono);color:#8f646e;line-height:1.7}.ft32-dispatch-label b{font:500 22px/1.15 var(--disp);letter-spacing:-.03em}.ft32-bundles{display:flex;gap:14px;margin:30px 0}.ft32-bundles>div{position:relative;flex:1;background:repeating-linear-gradient(1deg,#d8d5cd 0 2px,#e3e0d8 2px 5px);height:93px;border-radius:13px 13px 8px 8px;box-shadow:3px 5px 0 #d0cbc4,5px 9px 0 #e5ded8;border:1px solid #c6c2b9}.ft32-bundles i{position:absolute;inset:0 40%;background:#b05960;opacity:.8}.ft32-bundles span{position:absolute;left:7px;right:7px;top:23px;background:#fbfaf7;padding:10px 6px;font:7px/1.4 var(--mono);color:#625c60;transform:rotate(-3deg);box-shadow:0 2px 3px #0001}.ft32-bundles span b{font-size:10px;color:#2b262c;display:block;margin-top:5px}.ft32-dispatch-bottom{border-top:1px solid #d3c6ce;padding-top:18px;display:flex;justify-content:space-between;font:9px var(--sans);color:#75656f}.ft32-workflow-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:48px;border-top:1px solid #494249;padding-top:32px}.ft32-workflow-bottom p{font:15px/1.7 var(--sans);color:#bfb4bc;margin:0}.ft32-workflow-bottom b{color:#f1e8ec;font-weight:500}.ft32 .ft27-families{gap:30px}.ft32 .ft27-family-image{aspect-ratio:1.05;border-radius:2px 38px 2px 2px;background:#e8e5df}.ft32 .ft27-family h3{font-size:34px}.ft32 .ft27-family-copy>span{color:#a62b35}.ft32 .ft27-family p{color:#6b656c}.ft32 .ft27-engineering{background:#302d30;max-width:1680px}.ft32 .ft27-engineering-image:after{content:'';position:absolute;inset:20px;border:1px solid #fff5;pointer-events:none}.ft32 .ft27-engineering-copy{padding:65px 65px}.ft32 .ft27-engineering .ft27-eyebrow{color:#ce9ca3}.ft32 .ft27-engineering h2{font-size:58px}.ft32 .ft27-engineering p{color:#c5bac2}.ft32 .ft27-tags>span{border-color:#61545e;color:#d3c7cf}.ft32 .ft27-engineering small{color:#baacb6}.ft32 .ft27-sector-visual{border-radius:2px 45px 2px 2px;background:#e6e3df}.ft32 .ft27-sector-tabs button[aria-selected=true]{border-color:#a62b35}.ft32 .ft27-about{gap:100px}.ft32 .ft27-film{border-radius:2px 55px 2px 2px;min-height:500px}.ft32 .ft27-about h2{font-size:50px}.ft32 .ft27-about-copy p{color:#6e6670}.ft32 .ft27-about-copy .ft27-large-text{color:#302a31;font-size:23px}.ft32 .ft27-contact{max-width:none;background:#982b36;padding:86px max(50px,calc((100vw - 1400px)/2));grid-template-columns:1.2fr .75fr;gap:100px;position:relative;overflow:hidden}.ft32 .ft27-contact:before{content:'';position:absolute;inset:-120px -200px -250px 70%;border:1px solid #eebfc330;transform:rotate(30deg);border-radius:45%;pointer-events:none}.ft32 .ft27-contact h2{font-size:clamp(42px,4vw,63px)}.ft32 .ft27-contact h2 em{color:#e7bfc5}.ft32 .ft27-contact .ft27-eyebrow{color:#e9bdc3}.ft-pie{background:#242426!important}.ft-pie .bm img{width:265px;height:66px;display:block}.ft-pie-brand{border-color:#51464c!important}.ft32 .ft27-button,.ft27-button{background:#a62b35;border-color:#a62b35}.ft32 .ft27-button:hover,.ft27-button:hover{background:#86222c}.ft32 .ft27-button-light{background:#f7f6f2;border-color:#f7f6f2}.ft32 .ft27-button-light:hover{background:#e8e0e3}.ft27-button-outline{background:transparent;border-color:#aaa}.btn.btn-primary{background:#a62b35!important;border-color:#a62b35!important}.ft27-selection-button{background:#302c31}.ft27-listinghead,.ft-solicitud-cab{background:#eeebe6}.ft-fichatec{background:#f0ece7}.ft-solicitud-lado{background:#302c31!important}
@media(min-width:1781px){.ft32 .ft27-hero-copy{padding-left:95px}}
@media(max-width:1550px){.ft32-rail{display:none}.ft32 .ft27-hero-copy{padding-left:50px}.ft32-brand-caption{display:none}.ft32 .ft27-hero{min-height:660px}.ft32 .ft27-hero-art{min-height:610px}.ft32 .ft27-hero h1{font-size:clamp(73px,7.4vw,102px)!important}.ft32-workspace{gap:40px}}
@media(max-width:1100px){#desktop_logo img.logo{width:255px!important;max-width:255px!important;height:60px!important}#desktop-header .col-header-right{margin-left:25px}.ft-nav-lista{gap:27px}.ft32-nav-label{display:none}.ft32 .ft27-hero-copy{padding:45px 35px}.ft32 .ft27-hero h1{font-size:76px!important}.ft32 .ft27-hero-art{margin-right:20px;min-height:600px;border-top-right-radius:60px}.ft32 .ft27-actions{gap:22px}.ft32 .ft27-section{padding:80px 35px}.ft32-service-bottom{gap:55px}.ft32-workspace{grid-template-columns:.75fr 1.3fr;gap:28px}.ft32-work-tabs button{gap:15px}.ft32-work-tabs button b{font-size:22px}.ft32-work-stage{padding:22px}.ft32-stage-top{font-size:7px}.ft32 .ft27-engineering-copy{padding:50px 35px}.ft32 .ft27-engineering h2{font-size:48px}.ft32 .ft27-about{gap:45px}.ft32 .ft27-about h2{font-size:40px}.ft32 .ft27-family h3{font-size:29px}}
@media(max-width:767px){#mobile-header .col-mobile-logo img.logo{content:url('../img/ft-identidad.svg');width:213px!important;max-width:100%!important;height:49px!important;max-height:49px!important;object-fit:contain}#mobile-header,#mobile-header-sticky{background:#f7f6f2!important}#mobile-header .mobile-main-bar{padding-block:9px!important}.ft32 .ft27-hero{grid-template-columns:1fr;min-height:0}.ft32 .ft27-hero-copy{padding:36px 24px 30px}.ft32 .ft27-hero h1{font-size:65px!important;line-height:1.01;margin-bottom:25px!important}.ft32 .ft27-hero h1 br:nth-child(2){display:none}.ft32 .ft27-hero .ft27-eyebrow{font-size:8px!important;margin-bottom:24px!important}.ft32 .ft27-intro{font-size:15px}.ft32 .ft27-intro strong{font-size:17px}.ft32 .ft27-hero-note{font-size:11px;max-width:300px;padding-top:24px}.ft32 .ft27-hero-art{margin:0 16px 22px;min-height:430px;border-radius:2px 60px 2px 2px}.ft32 .ft27-hero-art figcaption{left:20px;right:30px;font-size:7px}.ft32 .ft27-art-link{left:17px;right:17px;bottom:17px;padding:18px;font-size:20px}.ft32-material-note{left:23px;top:25%;font-size:7px}.ft32-material-note b{font-size:10px}.ft32 .ft27-servicebar{padding:20px 24px 30px;gap:25px 18px}.ft32 .ft27-servicebar b{font-size:22px}.ft32 .ft27-servicebar span{font-size:10px;line-height:1.5;max-width:125px}.ft32 .ft27-section{padding:62px 24px}.ft32-service-heading h2{font-size:34px}.ft32-service-heading h2 br:nth-of-type(1){display:none}.ft32-service-bottom{grid-template-columns:1fr;gap:22px;margin-top:28px}.ft32-service-bottom>p{font-size:16px}.ft32-service-points span{font-size:13px}.ft32-supply-line{gap:10px;margin-top:35px;font-size:7px;letter-spacing:0}.ft32-supply-line img{width:43px;height:43px}.ft32-workflow h2{font-size:34px}.ft32-workspace{grid-template-columns:1fr;gap:28px}.ft32-work-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.ft32-work-tabs button{padding:10px 0 16px;flex-direction:column;gap:8px;align-items:flex-start}.ft32-work-tabs button b{font-size:14px;line-height:1.3;letter-spacing:0}.ft32-work-tabs button small,.ft32-work-tabs button i{display:none}.ft32-work-tabs button>span{font-size:9px}.ft32-work-stage{padding:19px 16px;min-height:410px;margin-inline:-8px}.ft32-stage-top{font-size:7px;gap:20px;line-height:1.6;margin-bottom:20px}.ft32-stage-top>span{max-width:130px}.ft32-paper{padding:22px 16px;transform:rotate(-.6deg)}.ft32-paper-title b{font-size:24px;margin-bottom:20px}.ft32-paper table{font-size:10px}.ft32-paper th{font-size:8px}.ft32-paper td{padding:12px 0}.ft32-file-note{font-size:7px}.ft32-demo{min-height:323px}.ft32-demo-caption{font-size:11px;margin-top:20px}.ft32-review{padding:19px 15px;min-height:272px}.ft32-review-head{gap:13px}.ft32-review-head b{font-size:19px}.ft32-review-head small{font-size:7px}.ft32-review li{font-size:10px;gap:16px}.ft32-review li b{max-width:120px}.ft32-dispatch{padding:20px 16px;min-height:272px}.ft32-dispatch-label b{font-size:20px}.ft32-dispatch-label>span{max-width:95px;font-size:7px}.ft32-bundles{gap:9px}.ft32-bundles span{left:3px;right:3px;padding:9px 4px;font-size:6px}.ft32-bundles span b{font-size:8px}.ft32-dispatch-bottom{font-size:8px;gap:15px}.ft32-workflow-bottom{margin-top:30px;flex-direction:column;align-items:flex-start;gap:23px}.ft32-workflow-bottom p{font-size:14px}.ft32 .ft27-family-image{aspect-ratio:1.24;border-top-right-radius:35px}.ft32 .ft27-family h3{font-size:30px}.ft32 .ft27-engineering-copy{padding:43px 24px}.ft32 .ft27-engineering h2{font-size:45px}.ft32 .ft27-engineering-image{min-height:340px}.ft32 .ft27-film{min-height:340px;border-top-right-radius:45px}.ft32 .ft27-about{gap:35px}.ft32 .ft27-about h2{font-size:37px}.ft32 .ft27-about-copy .ft27-large-text{font-size:22px}.ft32 .ft27-contact{padding:55px 24px;grid-template-columns:1fr;gap:30px}.ft32 .ft27-contact h2{font-size:42px}.ft-pie .bm img{width:245px;height:58px}}
@media(prefers-reduced-motion:reduce){.ft32-thread path{animation:none;stroke-dashoffset:0}.ft32-demo{animation:none}.ft32-rail a i{transition:none}}
.ft32-material-note{background:#222126b8;padding:11px 14px;backdrop-filter:blur(8px);text-shadow:none;border-left:1px solid #de9aa5}.ft32 .ft27-hero-art{border-radius:2px 75px 2px 2px!important}.ft32 .ft27-family-image,.ft32 .ft27-sector-visual{border-radius:2px 38px 2px 2px!important}.ft32 .ft27-film{border-radius:2px 45px 2px 2px!important}@media(max-width:767px){.ft32 .ft27-hero-art{border-top-right-radius:55px!important}.ft32-material-note{padding:9px 11px;left:18px}}

/* Front-end refinement: procurement paths and a continuous, accessible closing. */
.ft33-sector-note{display:block;margin-top:19px;max-width:460px;color:#756d73;font:12px/1.65 var(--sans)}
.ft33-service-notes{display:grid;margin:26px 0 29px;border-top:1px solid #d5cfd0}.ft33-service-notes>span{display:flex;gap:20px;padding:13px 0;border-bottom:1px solid #d5cfd0;font:14px/1.5 var(--sans)}.ft33-service-notes b{font:10px/2 var(--mono);color:#a62b35;font-weight:500}
.ft32 .ft27-about-copy h2{font-size:clamp(40px,4vw,64px);line-height:1.06}.ft32 .ft27-sector-tabs{gap:34px;flex-wrap:wrap}.ft32 .ft27-sector-tabs button{flex:1;justify-content:space-between;white-space:nowrap}
.ft33-contact{position:relative;background:#242426;color:#f7f6f2;overflow:hidden}.ft33-contact:before{content:'';position:absolute;width:760px;height:760px;right:-220px;top:-480px;border:1px solid #9e535d;border-radius:50%!important;box-shadow:0 0 0 28px #242426,0 0 0 29px #644148,0 0 0 60px #242426,0 0 0 61px #46353c;pointer-events:none;opacity:.65}.ft33-contact-inner{position:relative;max-width:1500px;margin:auto;padding:100px 50px 0}.ft33-contact-head{display:grid;grid-template-columns:1.55fr 1fr;gap:80px;align-items:end;margin-bottom:54px}.ft33-contact-head h2{font:500 clamp(40px,4vw,65px)/1.08 var(--disp);letter-spacing:-.048em;color:#f7f6f2;margin:0}.ft33-contact-head h2 em{color:#c1adb2;font-style:normal}.ft33-contact .ft27-eyebrow{color:#d098a1}.ft33-contact-head>p{font:16px/1.75 var(--sans);color:#bdb6bd;max-width:340px;margin:0 0 4px}.ft33-contact-head strong{display:block;font-weight:400;color:#f7f6f2;margin-top:12px}.ft33-start{display:grid;grid-template-columns:1fr 1.08fr;border:1px solid #53494e;background:#2c292d}.ft33-start-left{padding:35px 38px}.ft33-micro{display:block;font:9px/1.6 var(--mono);letter-spacing:.12em;color:#b7a6b0;margin-bottom:20px}.ft33-start-tabs{display:flex;flex-direction:column;gap:0}.ft33-start-tabs button{display:flex;align-items:center;gap:17px;padding:25px 0;width:100%;background:transparent;border:0;border-bottom:1px solid #50444c;color:#b5aab1;font:500 19px/1.35 var(--disp);text-align:left;cursor:pointer}.ft33-start-tabs button>span{font:10px var(--mono);color:#ad7b86}.ft33-start-tabs button i{margin-left:auto;font-size:24px;font-style:normal;color:#ab7b86;transition:transform .2s}.ft33-start-tabs button[aria-selected=true]{color:#fff;border-bottom-color:#d696a2}.ft33-start-tabs button[aria-selected=true] i{transform:rotate(45deg);color:#eed7dd}.ft33-start-tabs button:focus-visible{outline:2px solid #e2b4c0;outline-offset:4px}.ft33-start-right{background:#f3efea;color:#29262b;padding:36px 42px;min-height:330px}.ft33-start-right [role=tabpanel]{animation:ft32-stage-in .3s ease both}.ft33-start-right [hidden]{display:none!important}.ft33-start-right h3{font:500 29px/1.14 var(--disp);letter-spacing:-.035em;color:#2b282c;margin:0 0 18px}.ft33-start-right p{font:14px/1.7 var(--sans);color:#696168;margin-bottom:22px;max-width:460px}.ft33-start-right .ft33-micro{color:#986270}.ft33-start-right .ft27-button{min-height:47px;padding:13px 20px;font-size:13px!important}.ft33-brief-note{display:block;font:11px/1.6 var(--sans);color:#786e76;margin-top:14px}.ft33-direct{display:flex;align-items:center;gap:32px;padding:29px 0 36px;border-bottom:1px solid #51474f;font:13px var(--sans);color:#b2a5ae}.ft33-direct>a{color:#f1e9ef!important;--ft-enlace:#f1e9ef;font-size:16px;text-decoration:none}.ft33-direct>a:first-of-type{margin-left:auto;font-size:24px;letter-spacing:-.025em}.ft33-direct a span{display:inline-block;margin-left:12px;color:#c894a2}.ft33-direct a:hover{text-decoration:underline}
/* The custom footer occupies the entire existing Warehouse footer container. */
#index #wrapper{padding-bottom:0!important}#index #main,#index #content{margin-bottom:0!important}
#footer,#footer-container-main{background:#242426!important;border:0!important;padding:0!important;margin:0!important;color:#d8d0d5}
#footer-container-main>.container{max-width:none!important;width:100%;padding:0!important}
#footer-container-main>.container>.row{margin:0!important}
#footer-container-main>.container>.row:not(:has(.ft-pie)){display:none!important}
#footer .ft-pie{width:100%;max-width:none;background:#242426!important;border:0!important;margin:0!important;padding:0!important;color:#d8d0d5}
#footer .ft-pie>.ft-env{max-width:1500px;width:100%;padding:55px 50px 28px!important}
#footer .ft-pie-brand{align-items:center;justify-content:space-between;gap:45px;margin:0 0 37px;padding:0 0 37px;border-bottom:1px solid #494047}
#footer .ft-pie-brand .bm img{width:245px;height:auto}#footer .ft-pie-claim{flex:0 1 500px;min-width:0;font:13px/1.7 var(--sans);color:#b6aeb5;max-width:500px}
#footer .ft-pie-cols{grid-template-columns:1fr 1.15fr 1fr 1.2fr;gap:35px}
#footer .ft-pie-cols .ft-rot{font:10px/1.5 var(--mono);letter-spacing:.13em;color:#d8c8d2}
#footer .ft-pie-cols ul{margin-top:15px;gap:1px}#footer .ft-pie-cols li{border:0}#footer .ft-pie-cols li a{font:13px/1.5 var(--sans);color:#c2b9c1!important;--ft-enlace:#c2b9c1;padding:6px 0}
#footer .ft-pie a:hover{color:#fff!important;--ft-enlace:#fff;text-decoration:underline}#footer .ft-pie .ft-pie-tel{color:#f7f1f5!important;--ft-enlace:#f7f1f5;font:500 26px/1.3 var(--disp)!important;letter-spacing:-.02em;margin:6px 0 2px}
#footer .ft-pie-contacto{gap:10px}#footer .ft-pie-contacto address{color:#c2b9c1;font:13px/1.7 var(--sans);margin-bottom:0}#footer .ft-pie .ft-pie-mail{font:12px/1.7 var(--sans);color:#c2b9c1!important;--ft-enlace:#c2b9c1;overflow-wrap:anywhere;word-break:normal}
#footer .ft-pie .ft-legal{max-width:none;margin:37px 0 0;padding:18px 0 0;border-top:1px solid #494047}#footer .ft-pie .ft-legal summary{color:#b5a7b1;font:10px/1.6 var(--mono);padding:0;cursor:pointer}#footer .ft-pie .ft-legal .ft-firma{color:#bbb0b8;font:11px/1.7 var(--sans);margin-top:13px}
#footer a:focus-visible,#footer summary:focus-visible{outline:2px solid #e0b1be;outline-offset:4px}
@media(max-width:1100px){.ft33-contact-inner{padding:70px 30px 0}.ft33-contact-head{gap:40px}.ft33-start-left{padding:28px}.ft33-start-right{padding:30px}.ft33-start-tabs button{font-size:17px}.ft32 .ft27-sector-tabs{gap:20px}#footer .ft-pie>.ft-env{padding-inline:30px!important}#footer .ft-pie-cols{gap:25px;grid-template-columns:1fr 1fr}}
@media(max-width:767px){.ft32 .ft27-sector-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.ft32 .ft27-sector-tabs button{font-size:13px;padding:16px 0;white-space:normal;text-align:left;justify-content:flex-start;min-height:52px}.ft33-contact-inner{padding:58px 24px 0}.ft33-contact-head{grid-template-columns:1fr;gap:25px;margin-bottom:30px}.ft33-contact-head h2{font-size:42px}.ft33-contact-head>p{font-size:14px}.ft33-start{grid-template-columns:1fr}.ft33-start-left{padding:24px}.ft33-start-tabs button{font-size:16px;padding:18px 0;gap:12px}.ft33-start-right{padding:28px 24px;min-height:350px}.ft33-start-right h3{font-size:27px}.ft33-start-right p{font-size:13px}.ft33-start-right .ft27-button{width:100%;justify-content:space-between}.ft33-direct{align-items:flex-start;flex-direction:column;gap:13px;padding:27px 0 30px}.ft33-direct>a:first-of-type{margin:0}.ft33-direct>a{font-size:14px}#footer .ft-pie>.ft-env{padding:36px 24px 84px!important}#footer .ft-pie-brand{gap:25px;padding-bottom:30px;margin-bottom:30px}#footer .ft-pie-brand .bm img{width:225px}#footer .ft-pie-claim{font-size:12px}#footer .ft-pie-cols{grid-template-columns:1fr 1fr;gap:27px 18px}#footer .ft-pie-cols li a{font-size:12px}#footer .ft-pie .ft-pie-tel{font-size:21px!important}#footer .ft-pie-contacto{grid-column:1/-1}#footer .ft-pie .ft-legal{margin-top:28px}.ft33-service-notes>span{font-size:13px}}
@media(prefers-reduced-motion:reduce){.ft33-start-right [role=tabpanel]{animation:none}.ft33-start-tabs button i{transition:none}}

/* Tailored procurement workspace, with native form controls and motion restraint. */
.ft34-builder[hidden],.ft34-lens[hidden],[data-brief-fallback][hidden],.ft34-check[hidden]{display:none!important}
.ft34-reading{position:fixed;inset:0 0 auto;height:3px;background:#a72e3a;z-index:999;transform-origin:left;pointer-events:none}
.ft34-lens{position:absolute;z-index:4;top:19%;left:30px;right:30px;max-width:455px;background:#242426ee;color:#fff;backdrop-filter:blur(16px);border:1px solid #ffffff35;padding:23px 25px;box-shadow:0 20px 50px #15121625}
.ft34-lens-tabs{display:flex;gap:20px;border-bottom:1px solid #ffffff30;margin-bottom:20px}.ft34-lens-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:0 0 13px;color:#c1b8bb;font:10px/1.4 var(--mono);cursor:pointer}.ft34-lens-tabs button[aria-selected=true]{border-color:#e4a1aa;color:#fff}.ft34-lens [role=tabpanel]{min-height:105px}.ft34-lens [hidden]{display:none!important}.ft34-lens b{display:block;font:500 25px/1.15 var(--disp);letter-spacing:-.025em;margin-bottom:12px}.ft34-lens p{font:13px/1.65 var(--sans);color:#d5cccf;margin:0;max-width:350px}.ft34-lens button:focus-visible{outline:2px solid #ecbac2;outline-offset:4px}
.ft34-builder{display:grid;grid-template-columns:1.04fr 1fr;gap:70px;align-items:start;padding:16px 0 35px}.ft34-kicker{display:block;font:9px/1.6 var(--mono);letter-spacing:.13em;color:#cb9da7;margin-bottom:20px}.ft34-builder-controls>h3{font:500 31px/1.15 var(--disp);letter-spacing:-.035em;color:#f7f2ee;margin-bottom:35px}.ft34-options{border:0;padding:0;margin:0 0 26px}.ft34-options legend,.ft34-fields>label{float:none;display:block;color:#d6c8d0;font:11px/1.6 var(--mono);width:auto;margin:0 0 12px;letter-spacing:.02em}.ft34-options label{display:block;position:relative;margin:0;cursor:pointer}.ft34-options input{position:absolute;left:17px;top:20px;accent-color:#a72e3a;width:16px;height:16px;cursor:pointer}.ft34-options label>span{display:flex;align-items:center;justify-content:space-between;border:1px solid #584a51;margin-top:-1px;padding:17px 18px 17px 46px;color:#c6bdc3;font:17px var(--sans);transition:background .2s}.ft34-options input:checked+span{background:#473138;border-color:#b87481;color:#fff}.ft34-options input:focus-visible+span{outline:2px solid #f0b7c3;outline-offset:3px}.ft34-options i{font-style:normal;color:#dca2ac}.ft34-fields input[type=text],.ft34-fields textarea{display:block;width:100%;background:#302b30;border:1px solid #665660;color:#fff;padding:14px;font:15px/1.5 var(--sans);margin-bottom:20px;border-radius:0;resize:vertical}.ft34-fields input::placeholder,.ft34-fields textarea::placeholder{color:#b3a6af;opacity:1}.ft34-fields small{font:10px var(--sans);color:#b8a8b3;margin-left:8px}.ft34-fields .ft34-check{font:13px/1.5 var(--sans);display:flex;align-items:center;gap:10px}.ft34-check input{accent-color:#a72e3a;width:18px;height:18px}.ft34-help{font:12px/1.6 var(--sans);color:#bcb0b7;max-width:470px;margin:15px 0 0}
.ft34-paper{background:#f7f4ee;color:#2c272a;position:sticky;top:30px;box-shadow:15px 17px 0 -7px #242426,15px 17px 0 -6px #5b4a51;border-top:3px solid #a72e3a;min-width:0}.ft34-paper-top{display:flex;justify-content:space-between;gap:15px;padding:22px 30px;border-bottom:1px solid #d6ced0;font:9px var(--mono);letter-spacing:.13em;color:#81737a}.ft34-paper-top>span:first-child{color:#a72e3a;font-weight:600;font-size:16px}.ft34-paper-body{padding:30px}.ft34-paper .ft34-kicker{color:#995662;margin-bottom:12px}.ft34-paper h3{font:500 35px/1.1 var(--disp);letter-spacing:-.04em;color:#2c272a;margin:0 0 28px}.ft34-paper dl{margin:0}.ft34-paper dl>div{padding:15px 0;border-top:1px solid #d9cfd2}.ft34-paper dt{font:9px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:#85767c;margin-bottom:5px}.ft34-paper dd{font:14px/1.6 var(--sans);color:#393237;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;max-height:230px;overflow:auto}.ft34-checklist{margin-top:22px;padding:18px;border-left:2px solid #a72e3a;background:#ede7e5}.ft34-checklist>span{font:11px var(--sans);color:#89505c}.ft34-checklist p{font:13px/1.8 var(--sans);color:#4f4149;margin:8px 0 0}.ft34-paper-actions{padding:0 30px 25px}.ft34-paper-actions .ft27-button{display:flex;justify-content:space-between;width:100%;font-size:13px!important;gap:16px}.ft34-paper-actions>button{display:block;background:none;border:0;border-bottom:1px solid #ac8f97;padding:9px 0;color:#883545;margin-top:14px;font:12px var(--sans);cursor:pointer}.ft34-paper-actions>p{font:11px/1.6 var(--sans);color:#77666e;margin:15px 0 0}.ft34-paper-actions p a{display:block;color:#8a2534;text-decoration:underline;margin-top:8px}.ft34-builder :is(input,textarea,button,a):focus-visible{outline:2px solid #b96373;outline-offset:4px}
@media(max-width:1100px){.ft34-builder{gap:35px}.ft34-lens{left:20px;right:20px;padding:20px}.ft34-lens-tabs{gap:14px}.ft34-lens b{font-size:23px}.ft34-paper-body,.ft34-paper-actions{padding-left:24px;padding-right:24px}}
@media(max-width:767px){.ft34-builder{grid-template-columns:1fr;gap:30px;padding-bottom:15px}.ft34-builder-controls>h3{font-size:28px;margin-bottom:25px}.ft34-paper{position:relative;top:auto;box-shadow:none}.ft34-paper h3{font-size:30px}.ft34-paper-body{padding:25px 22px}.ft34-paper-actions{padding:0 22px 22px}.ft34-options label>span{font-size:16px}.ft34-lens{top:19%;padding:17px;left:17px;right:17px}.ft34-lens-tabs{gap:16px;margin-bottom:14px}.ft34-lens-tabs button{font-size:9px;padding-bottom:10px}.ft34-lens b{font-size:21px;margin-bottom:9px}.ft34-lens p{font-size:12px}.ft34-lens [role=tabpanel]{min-height:104px}.ft32 .ft27-hero-art{min-height:480px}.ft34-fields input[type=text],.ft34-fields textarea{font-size:16px}.ft34-paper-top{padding:20px 22px}}
@media(prefers-reduced-motion:reduce){.ft34-options label>span{transition:none}}

/* Identidad elegida por el titular: cinta entrelazada, sin descriptor. */
#desktop_logo img.logo{content:url('../img/ft-logo-cinta-limpia-20261008.png');width:320px!important;max-width:320px!important;height:124px!important;max-height:124px!important;object-fit:contain;object-position:left center}
#mobile-header .col-mobile-logo img.logo,#mobile-header-sticky .col-mobile-logo img.logo{content:url('../img/ft-logo-cinta-limpia-20261008.png');width:225px!important;max-width:100%!important;height:86px!important;max-height:86px!important;object-fit:contain}
.ft-pie .bm img{content:url('../img/ft-logo-cinta-limpia-20261008.png');width:285px;height:110px;max-width:100%;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
@media(min-width:768px) and (max-width:1100px){#desktop_logo img.logo{width:270px!important;max-width:270px!important;height:104px!important;max-height:104px!important}.ft32-brand-caption{display:none}}