:root{
  --accent:#E23230;      /* vermell accent */
  --brown:#523F34;       /* marró text */
  --dark:#211D1A;        /* fosc */
  --beige:#DBC6BF;       /* beix 100% */
  --beige-60:#E7D8D3;
  --beige-35:#F1E9E6;
  --beige-18:#F7F2F0;
  --beige-08:#FAF8F7;
  --white:#FFFFFF;
  --hair:rgba(82,63,52,.14);
  --sec-y:96px;        /* padding vertical de sección */
  --sec-x:40px;        /* margen lateral */
  --sec-max:1440px;

  /* ---------- Escala tipografica ----------
     Una sola regla por titular, valida de 375 a 1440 px. El valor maximo es
     exactamente el del artboard de 1440; el minimo es el de 375. Entre medias
     interpola sola, asi que no hay saltos ni huecos de cobertura entre
     breakpoints, y ningun nivel puede adelantar al de arriba:
     hero 50→34 · h1 44→30 · h2 34→25 · h3 21→18 · h4 18→16.
     Antes cada archivo redefinia sus tamanos por su cuenta y la jerarquia se
     invertia en movil (el h2 salia mas grande que el h1 de la home).

     El extremo de movil se ha subido un escalon: con la primera escala los
     titulares se quedaban timidos al lado del cuerpo de texto. */
  --fs-hero:clamp(34px, 28.37px + 1.5vw, 50px);
  --fs-h1:clamp(30px, 25.07px + 1.31vw, 44px);
  --fs-h2:clamp(25px, 21.83px + 0.85vw, 34px);
  --fs-h3:clamp(18px, 16.94px + 0.28vw, 21px);
  --fs-h4:clamp(16px, 15.3px + 0.19vw, 18px);
  /* Rotulos de pieza: tarjeta de categoria, mosaico de sectores y de lineas. */
  --fs-card:clamp(19px, 17.24px + 0.47vw, 24px);
  --fs-tile:clamp(20px, 17.89px + 0.56vw, 26px);
  --fs-item:clamp(18px, 16.59px + 0.38vw, 22px);
}
*{box-sizing:border-box}
/* ---------- Respall metric de la Geist ----------
   Mentre la Geist no ha arribat, el text es pinta amb la font del sistema.
   Si aquesta ocupa una amplada diferent, en entrar la Geist tot es
   reajusta: mesurat al mobil, «.eyebrow» passava de 166 a 150 px i
   «.qcta» de 117 a 110, i el desplaçament acumulat era la meitat del CLS
   de la portada.

   Aqui es declara la mateixa font del sistema amb una escala que la fa
   ocupar el mateix que la Geist. Els numeros no son inventats: surten de
   llegir els fitxers, comparant l'amplada mitjana de les 52 lletres
   llatines per em i les metriques verticals de hhea.

     Geist            0,5952 d'ample per em, asc 1,005, desc 0,295
     Roboto           0,5667  -> escala 105,0%
     Arial            0,5835  -> escala 102,0%   (mesurat amb Liberation
                                 Sans, que li es compatible en metriques)
     DejaVu Sans      0,6180  -> escala  96,3%

   Cada respall porta el seu nom de familia: amb un de sol, i diverses
   declaracions, mana l'ultima que case i no la primera que existeixi al
   sistema. Aixi el navegador va provant i es queda amb la que te.

   Nomes afecta l'estona abans que la Geist pinti. El resultat final no
   canvia gens. */
@font-face{font-family:"Geist fb Roboto";src:local("Roboto");font-display:swap;
  size-adjust:105.0%;ascent-override:95.7%;descent-override:28.1%;line-gap-override:0%}
@font-face{font-family:"Geist fb Arial";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");font-display:swap;
  size-adjust:102.0%;ascent-override:98.5%;descent-override:28.9%;line-gap-override:0%}
@font-face{font-family:"Geist fb DejaVu";src:local("DejaVu Sans");font-display:swap;
  size-adjust:96.3%;ascent-override:104.3%;descent-override:30.6%;line-gap-override:0%}

body{margin:0;background:#ffffff;font-family:Geist,"Geist fb Roboto","Geist fb Arial","Geist fb DejaVu","Segoe UI",system-ui,sans-serif;color:#523F34;-webkit-font-smoothing:antialiased}
a{color:#E23230;text-decoration:none}
a:hover{color:#211D1A}
img{display:block}
.top{position:sticky;position:-webkit-sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--hair)}
.navrow{max-width:none;margin:0;padding:0 0 0 40px;height:74px;display:flex;align-items:stretch;gap:0}
.qlink{color:#523F34;font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;transition:color .2s ease;white-space:nowrap;display:inline-flex;align-items:center}
.qitem{align-self:stretch;display:flex;align-items:center}
/* Fila de Contacto duplicada para el menu movil (ver header.php): en
   escritorio no existe fila para ella, solo el .qcta suelto de la cabecera. */
.qitem--cta-movil{display:none}
.qitem:hover .qlink,.qitem.is-open .qlink{color:#E23230}
/* La pagina en curs: subratllat fi i el color de sempre. El vermell queda per
   al desplegable obert o l'element sota el ratoli: dos vermells alhora no
   deixaven saber on s'era. */
.qlink.on{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
/* Rotol amb desplegable: es un boto (nomes obre), amb l'aspecte de l'enllac. */
.qlink--menu{background:none;border:0;padding:0;margin:0;font-family:inherit;line-height:inherit;cursor:pointer;text-align:left}
.qlink--menu:focus-visible{outline:2px solid #E23230;outline-offset:4px}
.qcaret{display:inline-block;transition:transform .28s ease;margin-left:5px;vertical-align:-2px}
html:not(.qjs) .qitem:hover .qcaret,.qitem.is-open .qcaret{transform:rotate(180deg)}
.qmega{position:absolute;left:0;right:0;top:100%;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.2,1),visibility .22s;pointer-events:none;z-index:40;background:#FAF8F7;border-top:1px solid var(--hair);box-shadow:0 40px 70px -34px rgba(33,29,26,.4)}
/* Amb JS s'obre amb intencio (pausa en passar el ratoli, o clic); sense, amb :hover. */
html:not(.qjs) .qitem:hover .qmega,.qitem.is-open > .qmega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* Selector de idioma de escritorio: con solo ES/CA, sueltos uno junto al
   otro (no un desplegable), con el mismo filete vertical que .qcta/.qsearch
   y el mismo ancho fijo que .qsearch para que quede simetrico. */
.qlangs{display:flex;align-items:center;justify-content:center;gap:14px;flex-shrink:0;height:100%;padding:0 22px;border-left:1px solid var(--hair)}
.qlangs-link{color:#523F34;font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;transition:color .18s ease}
.qlangs-link:hover{color:#E23230}
.qlangs-link.on{color:#E23230;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
/* Fila del panel movil: mismo aspecto que una fila normal del menu. Clase
   propia (no comparte base con .qlangs): si no, la regla que esconde la
   version de escritorio en movil (.qlangs{display:none}) tambien apagaba
   esta por compartir ".qlangs". */
.qitem--idiomas-movil{display:none}
.qlangs-movil{display:flex;align-items:center;gap:20px}
.qsublink{display:flex;align-items:flex-start;gap:12px;padding:11px 0;color:#523F34;font-weight:500;font-size:15px;line-height:1.3;transition:color .18s ease}
.qsublink svg{width:16px;height:16px;flex:none;stroke:rgba(82,63,52,.62);transition:stroke .18s ease;margin-top:1px}
.qsublink:hover{color:#E23230}
.qsublink:hover svg{stroke:#E23230}
.qgroup{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#E23230;margin-bottom:16px}
.qall{display:inline-flex;align-items:center;gap:7px;color:#523F34;font-weight:500;font-size:13px;letter-spacing:.02em;margin-top:auto;transition:color .18s ease}
.qall svg{width:14px;height:14px}
.qall:hover{color:#E23230}
/* La franja de «Ver todo» / «Ver marca» arriba fins a baix de la columna i el
   text hi va centrat en vertical: abans el coixi de sota (el de la columna)
   era el doble que el de sobre. */
.cat1 .qall,.cat2 .qall,.cat3 .qall,.cat4 .qall{border-top:1px solid var(--hair);margin:auto -28px -28px;padding:21px 28px;width:auto}
.qall-div{border-top:1px solid var(--hair);margin:auto -28px -28px;padding:21px 28px;width:auto}
.qall .arw{display:block;transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.qcol:hover .qall .arw,.qall:hover .arw{transform:translateX(3px)}
/* Columna que es tota un enllac (marques): fons en passar el ratoli. */
.qcol--enlace{color:#523F34;transition:background-color .2s ease}
.qcol--enlace:hover{background:#F1E9E6;color:#523F34}
.qcol--enlace:hover .qall{color:#E23230}
.qcol--enlace:focus-visible{outline:2px solid #E23230;outline-offset:-2px}
.qfeat .fimg{opacity:0;transition:opacity .35s ease}
.qfeat .f1{opacity:1}
.qcol:hover ~ .qfeat .fimg{opacity:0}
.qcol.cat1:hover ~ .qfeat .f1{opacity:1}
.qcol.cat2:hover ~ .qfeat .f2{opacity:1}
.qcol.cat3:hover ~ .qfeat .f3{opacity:1}
.qcol.cat4:hover ~ .qfeat .f4{opacity:1}
.fcap{position:absolute;left:0;right:0;bottom:0;padding:96px 28px 28px;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 42%,rgba(0,0,0,0) 100%);display:flex;flex-direction:column;gap:10px}
.fk{color:#fff;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.ft{color:rgba(255,255,255,.72);font-size:13px;line-height:1.4}
.qcta{position:relative;overflow:hidden;flex-shrink:0;background:#fff;color:#211D1A;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:0 40px;white-space:nowrap;display:flex;align-items:center;margin-left:auto;border-left:1px solid var(--hair);transition:color .3s ease}
.qcta::before{content:"";position:absolute;inset:0;background:#E23230;transform:scaleX(0);transform-origin:left center;transition:transform .42s cubic-bezier(.6,.2,.2,1);z-index:0}
.qcta:hover{color:#fff}
.qcta:hover::before{transform:scaleX(1)}
.qcta>span{position:relative;z-index:1}
.qsearch{background:#fff;border:none;flex-shrink:0;border-left:1px solid var(--hair);width:70px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#523F34;transition:background .18s ease}
.qsearch:hover{background:#F5EFED;color:#E23230}
.qsearch svg{width:20px;height:20px}
.qsearch.on{background:#F5EFED;color:#E23230}
.qsearchpanel{max-height:0;overflow:hidden;opacity:0;background:#fff;transition:max-height .42s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.top.search-open .qsearchpanel{max-height:92px;opacity:1;border-top:1px solid var(--hair)}
.qsearchinner{max-width:none;margin:0;padding:16px 40px;display:flex;align-items:center;gap:14px}
.qsearchinner>svg{width:19px;height:19px;stroke:rgba(82,63,52,.58);flex:none}
.qsearchinner input{flex:1;border:none;outline:none;font-family:inherit;font-size:19px;font-weight:500;letter-spacing:-.01em;color:#523F34;background:transparent}
.qsearchinner input::placeholder{color:rgba(82,63,52,.35)}
/* Vermell d'accent: es una accio, i el roig el DS el reserva justament a
   aixo. font-variant-emoji:text per si el rotol que hi ha a Ajustes es un
   aspa amb presentacio d'emoji, que es dibuixa amb el seu propi color i
   ignora «color». */
.qsclose{background:none;border:none;cursor:pointer;color:#E23230;font-variant-emoji:text;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;transition:opacity .2s ease;white-space:nowrap}
.qsclose:hover{opacity:.7}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.herologos{overflow:hidden;width:100%;margin-top:26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.herologos-track{display:flex;align-items:center;gap:52px;width:max-content;animation:logoscroll 26s linear infinite}
.herologos-track img{flex:none;opacity:.82}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.caret{border-right:3px solid rgba(255,255,255,.92);margin-left:2px;animation:blink 1s step-end infinite}
.logos-track:hover{animation-play-state:paused}
.fu{opacity:0;animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards}
.qsector{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:22px;padding:28px;min-height:240px;background:#fff;border:1px solid var(--hair);transition:background .28s ease,border-color .28s ease}
.qsector.is-lit{background:#E23230;border-color:#E23230}
.qsector.is-lit .qsec-t{color:#fff}
.qsector.is-lit .qsec-ic img{filter:brightness(0) invert(1)}
.qsec-bar{position:absolute;left:0;right:0;bottom:-1px;height:3px;overflow:hidden;z-index:2}
.qsec-bar i{display:block;height:100%;width:0;background:rgba(224,49,44,.4)}
.qsector.is-lit .qsec-bar i{background:rgba(255,255,255,.9)}
.qsector:hover{background:#E23230;border-color:#E23230}
.qsec-ic img{transition:filter .22s ease}
.qsector:hover .qsec-ic img{filter:brightness(0) invert(1)}
.qsec-ic{height:54px;position:relative;display:flex;align-items:center}
.qsec-t{font-weight:700;font-size:var(--fs-tile);letter-spacing:-.01em;color:#523F34;transition:color .2s ease}
.qsector:hover .qsec-t{color:#fff}
.qseccol{position:relative;overflow:hidden;padding:34px 30px;border-right:1px solid var(--hair);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px;min-height:220px;transition:background .22s ease}
.qseccol:last-child{border-right:none}
.qseccol:hover{background:#523F34}
.qseccol .ic{height:78px;position:relative;display:flex;align-items:center;justify-content:center}
.qseccol .ic img{position:static !important;height:100% !important;width:auto !important;object-fit:contain;transition:filter .22s ease}
/* Sobre el marron del hover solo cambia de color el rotulo: el icono conserva
   el suyo. Invertirlo a blanco lo convertia en una silueta plana. */
.qseccol:hover .ic img{filter:none}
.qseccol .nm{font-weight:600;font-size:var(--fs-tile);color:#523F34;letter-spacing:-.01em;transition:color .2s ease}
.qseccol:hover .nm{color:#fff}
.eyebrow{display:inline-flex;align-items:center;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#E23230;margin-bottom:18px}
.eyebrow.dark{color:#E23230}
.h1{font-weight:600;font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.025em;color:#523F34;margin:0;text-wrap:pretty}
.h3{font-weight:500;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.01em;color:#523F34;margin:0;text-wrap:pretty}
.h2{font-weight:500;font-size:var(--fs-h2);line-height:1.14;letter-spacing:-.02em;color:#523F34;margin:0;text-wrap:pretty}
.sub{color:rgba(82,63,52,.72);font-size:15.5px;line-height:1.6;margin:0}
.catcard{position:relative;display:block;overflow:hidden;background:#211D1A;text-decoration:none;aspect-ratio:5/6}
.catimg{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.catcard:hover .catimg{transform:scale(1.06)}
.cattop{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:11px;padding:14px 16px;background:#fff;z-index:3}
.catmark{width:26px;height:26px;background:#E23230;flex:none}
.cattag{font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#211D1A}
.catgrad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,0) 70%);z-index:2}
.cattitle{position:absolute;left:0;right:0;bottom:0;padding:24px 22px;z-index:3}
.cattitle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#E23230;font-weight:600;font-size:var(--fs-card);letter-spacing:-.01em;line-height:1.1}
.catdesc{margin:0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.9);max-width:92%}
.catbar{position:absolute;top:0;left:0;right:0;z-index:3;background:#fff;border:1px solid rgba(82,63,52,.07);display:flex;align-items:stretch;color:#E23230}
.catbar-t{flex:1;padding:11px 16px;display:flex;align-items:center;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.catbar-arw{width:48px;height:48px;box-sizing:border-box;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:#E23230;box-shadow:inset 1px 0 0 rgba(82,63,52,.07);transition:background .22s ease,color .22s ease}
.catcard:hover .catbar-arw{background:#E23230;color:#fff}
.svc-img{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.svc-img.is-on{opacity:1}
.svc-list{display:flex;flex-direction:column;min-height:300px;justify-content:flex-end}
.svc-item{position:relative;width:100%;text-align:left;background:none;border:none;border-top:1px solid rgba(82,63,52,.14);padding:13px 2px;cursor:pointer;font-family:inherit;display:block}
.svc-item:last-of-type{border-bottom:1px solid rgba(82,63,52,.14)}
.svc-head{display:flex;align-items:center;gap:16px}
.svc-t{font-weight:500;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.01em;color:#523F34;margin:0;transition:color .22s ease}
.svc-item.is-active .svc-t{color:#E23230}
.svc-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .5s ease,opacity .4s ease,margin-top .5s ease}
/* El alto era fijo en 3,4em: dos lineas contadas. Cualquier descripcion algo
   mas larga se cortaba a media palabra, y en movil —columna mas estrecha, mas
   lineas— se comia media frase. El tope alto solo sirve para que la transicion
   tenga a donde ir; quien manda es el contenido. */
.svc-item.is-active .svc-body{max-height:18em;height:auto;opacity:1;margin-top:10px}
.svc-body p{margin:0;font-size:15px;line-height:1.6;color:rgba(82,63,52,.72)}
.svc-bar{position:absolute;left:0;bottom:-1px;height:1px;width:100%;overflow:hidden}
.svc-bar i{display:block;height:100%;width:0;background:#E23230}
.prodcard{background:#fff;display:flex;flex-direction:column;transition:box-shadow .22s ease}
.prodcard:hover{box-shadow:0 24px 44px -30px rgba(33,29,26,.5)}
.prodcard:hover .prodcta{color:#E23230}
.prodcta{transition:color .18s ease}
.svcrow{display:flex;align-items:flex-start;gap:18px;padding:24px 0;border-top:1px solid var(--hair)}
.foothead{font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 18px}
.footlink{display:block;color:rgba(255,255,255,.62);font-size:14px;padding:6px 0;transition:color .18s ease}
.footlink:hover{color:#fff}
.socico{display:inline-flex;padding:0}
.socico svg{width:20px;height:20px}
.secitem{display:flex;flex-direction:column;align-items:center;gap:18px;padding:18px 16px;text-decoration:none;position:relative}
.secitem img{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.secitem:hover img{transform:translateY(-6px) scale(1.05)}
.sec-idx img{transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),transform none}
.sec-idx:hover img{transform:none}
.secname{font-weight:500;font-size:var(--fs-item);letter-spacing:-.01em;color:#523F34;transition:color .2s ease}
.secitem:hover .secname{color:#E23230}
.secwrap{max-width:var(--sec-max);margin:0 auto;padding:var(--sec-y) var(--sec-x)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:13px 26px;white-space:nowrap;cursor:pointer;position:relative;background-repeat:no-repeat;background-position:left center;background-size:0% 100%;transition:background-size .42s cubic-bezier(.6,.2,.2,1),color .3s ease,border-color .3s ease}
.btn:hover{background-size:100% 100%}
.btn>span{position:relative;z-index:1}
/* sobre fondo claro */
.btn-primary{background-color:#E23230;color:#fff;background-image:linear-gradient(#211D1A,#211D1A)}
.btn-primary:hover{color:#fff}
.btn-ctafill{background-color:#E23230;color:#fff;background-image:linear-gradient(#211D1A,#211D1A)}
.btn-ctafill:hover{color:#fff}
.btn-ctafill.on-dark{background-image:linear-gradient(#fff,#fff)}
.btn-ctafill.on-dark:hover{color:#211D1A}
.btn-outline{border:1px solid #523F34;color:#523F34;background-color:transparent;background-image:linear-gradient(#523F34,#523F34)}
.btn-outline:hover{color:#fff}
/* sobre fondo oscuro */
.btn-invert{background-color:#fff;color:#211D1A;background-image:linear-gradient(#E23230,#E23230)}
.btn-invert:hover{color:#fff}
.btn-light{border:1px solid rgba(255,255,255,.55);color:#fff;background-color:transparent;background-image:linear-gradient(#523F34,#523F34)}
.btn-light:hover{color:#fff;border-color:#523F34}
/* ---------- Puntos de carrusel ----------
   Solo existen en el rango de movil, donde una rejilla pasa a carrusel. El
   CSS del tramo ancho los esconde; aqui vive el aspecto. */
.cpuntos{display:none;gap:8px;justify-content:center;margin-top:20px}
.cpunto{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(82,63,52,.24);cursor:pointer;transition:background .2s ease,transform .2s ease}
.cpunto[aria-current="true"]{background:#E23230;transform:scale(1.25)}
/* El punto mide 8 px, pero el area que recibe el dedo tiene que ser de 44. */
.cpuntos{position:relative}
.cpunto::before{content:"";position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;margin-left:-18px}

.trustrow{display:grid;grid-template-columns:repeat(4,auto);gap:26px;justify-content:start}
.trustitem{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-weight:700;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:#523F34;line-height:1.3}
.pagehero{background:#211D1A;min-height:50vh;display:flex;align-items:flex-end}
.pagehero .secwrap{width:100%}
.ctasection{background:#211D1A}
.ctablock{background:#211D1A;border:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:1fr 1fr}
.ctablock-img{position:relative;background:#211D1A;border-right:1px solid rgba(255,255,255,.14);min-height:360px;min-width:0}
.ctablock-body{padding:40px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.ctablock-t{font-weight:500;font-size:var(--fs-h2);line-height:1.14;letter-spacing:-.02em;color:#fff;margin:0;max-width:560px;text-wrap:pretty}
.ctablock-p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.72);margin:16px 0 0;max-width:480px}
.ctablock-actions{display:flex;gap:14px;flex-wrap:wrap}
.ctablock-actions .btn{padding:12px 24px;font-size:12px}
.ctablock-actions .btn-light{border-color:rgba(255,255,255,.14)}
.benrow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.bencard{border:1px solid var(--hair);background:#FAF8F7;padding:26px 24px;display:flex;flex-direction:column;gap:40px;justify-content:space-between;transition:border-color .2s ease}
.bencard:hover{border-color:#523F34}
.bennum{font-weight:700;font-size:14px;color:#E23230;margin-bottom:14px}
.benicon{color:#523F34}
.benicon svg{width:22px;height:22px}
.bentitle{font-weight:500;font-size:var(--fs-h3);letter-spacing:-.01em;color:#523F34;line-height:1.25;margin:0}
.bendesc{font-size:14px;line-height:1.55;color:rgba(82,63,52,.72);margin:0}
a.bencard{transition:background-color .2s ease,border-color .2s ease}
a.bencard:hover{background:#523F34;border-color:#523F34}
a.bencard:hover .bentitle{color:#fff}
a.bencard:hover .bendesc{color:rgba(255,255,255,.72)}
a.bencard:hover .benicon{color:#fff}
.btn-dark{background-color:#211D1A;color:#fff;background-image:linear-gradient(#E23230,#E23230)}
.btn-dark:hover{color:#fff}
.eyebrow.brown{color:#523F34}
/* 16 px es el minimo, no una eleccion tipografica: por debajo, Safari en
   iOS hace zoom al enfocar el campo y deja la pagina descuadrada, con el
   formulario a medio salir de pantalla. */
.fld{font:inherit;font-size:16px;color:#523F34;background:transparent;border:0;border-bottom:1px solid var(--hair);padding:16px 2px;width:100%;transition:border-color .2s ease}
.fld::placeholder{color:rgba(82,63,52,.5)}
.fld:focus{outline:none;border-bottom-color:#523F34}
textarea.fld{resize:vertical;line-height:1.6}
.filefld{position:relative;display:flex;align-items:center;gap:10px;margin-top:14px;padding:13px 16px;border:1px dashed rgba(82,63,52,.32);color:#523F34;font-size:14px;font-weight:500;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.filefld:hover{border-color:#523F34;background:var(--beige-08)}
.benrow.on-beige .bencard{background:transparent;border-color:rgba(33,29,26,.28)}
.benrow.on-beige .bentitle,.benrow.on-beige .benicon{color:#211D1A}
.benrow.on-beige .bendesc{color:rgba(33,29,26,.72)}
.benrow.on-beige .eyebrow{color:#E23230}
.benrow.on-beige .h2{color:#211D1A}
.benrow.on-beige a.bencard:hover{background:#211D1A;border-color:#211D1A}
.benrow.on-beige a.bencard:hover .bentitle,.benrow.on-beige a.bencard:hover .benicon{color:#fff}
.benrow.on-beige a.bencard:hover .bendesc{color:rgba(255,255,255,.72)}
button.btn{border:0;cursor:pointer;font-family:inherit;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#brandquote.on{opacity:1!important;transform:none!important}
.drawline{display:block;width:1px;height:0;background:#523F34;opacity:.45}
.drawline.on{animation:drawDown 1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes drawDown{from{height:0}to{height:72px}}
.sec-idx{overflow:hidden}
.sec-idx img{transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1)}
.sec-idx:hover img{width:120px!important;height:120px!important;transform:none!important}
.sec-idx .secname{transition:margin-top .35s cubic-bezier(.2,.7,.2,1)}
.sec-idx:hover .secname{margin-top:0}
.sec-idx span span:last-child{max-height:60px;opacity:1;overflow:hidden;transition:max-height .3s ease,opacity .2s ease}
.sec-idx:hover span span:last-child{max-height:0;opacity:0}
.sec-idx:hover{background:#523F34}
.sec-idx:hover .secname{color:#fff}

/* ==========================================================================
   Listado con filtros — componentes (diseno 1a «Indice con jerarquia»)
   Radio 0 y sin sombras, como el resto del DS. Rojo solo en el estado activo
   de la casilla y en la accion de limpiar.
   ========================================================================== */

/* Casilla: la nativa, oculta a la vista pero accesible y con su teclado, y un
   cuadro pintado al lado. El estado intermedio es el indeterminate nativo. */
.lst-op{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;color:#211D1A}
.lst-input{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0}
.lst-box{flex:none;display:flex;align-items:center;justify-content:center;width:18px;height:18px;box-sizing:border-box;
  border:1.5px solid rgba(82,63,52,.45);background:#FAF8F7;color:#fff}
.lst-box svg{display:none;width:13px;height:13px}
.lst-input:checked + .lst-box,
.lst-input:indeterminate + .lst-box{background:#E23230;border-color:#E23230}
.lst-input:checked + .lst-box svg{display:block}
.lst-input:indeterminate + .lst-box svg{display:none}
.lst-input:indeterminate + .lst-box::after{content:"";width:8px;height:2px;border-radius:1px;background:#fff}
.lst-input:focus-visible + .lst-box{outline:2px solid #523F34;outline-offset:2px}

.lst-op-n{flex:1 1 auto;min-width:0}
.lst-op-c{flex:none;font-size:13px;color:#523F34;font-variant-numeric:tabular-nums}

/* Opcion sin resultados: se apaga, no se esconde, y la lista no salta. */
.lst-op.is-off{cursor:default}
.lst-op.is-off .lst-op-n,
.lst-op.is-off .lst-op-c{color:rgba(82,63,52,.3)}
.lst-op.is-off .lst-box{border-color:rgba(82,63,52,.24)}

/* Chip de filtro activo: fondo beix, sin filete. */
.lst-chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.lst-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 10px;background:#F1E9E6;border:0;border-radius:0;
  color:#211D1A;font-size:13px;line-height:1.3;transition:background-color .2s ease}
.lst-chip:hover{background:#E7D8D3;color:#211D1A}
.lst-chip svg{width:12px;height:12px;flex:none;color:#523F34;stroke-width:2.6}

/* Flecha de una categoria: solo abre y cierra; la casilla es la que filtra.
   El trazo va pegado a la derecha del boton, a la vertical de los recuentos.
   El chevron de Lucide deja un cuarto del icono en blanco a cada lado (va de
   6 a 18 sobre 24): el margen negativo se come ese blanco. */
.lst-toggle{display:flex;align-items:center;justify-content:flex-end;flex:none;width:32px;height:32px;padding:0;
  background:none;border:0;border-radius:0;color:#523F34;cursor:pointer}
.lst-toggle:hover{color:#211D1A}
.lst-caret{display:flex;margin-right:-4px}
.lst-caret svg{width:16px;height:16px;display:block}
.lst-toggle[aria-expanded="true"] .lst-caret{transform:rotate(180deg)}