/* Angelo Luchini · CSS generado por construir.py · no editar a mano */

/* ══════════ tokens ══════════ */
/* ═══════════════════════════════════════════════════════════════
   CONTRATO DE TOKENS · LIBRERÍA ROSET · v2
   ───────────────────────────────────────────────────────────────
   La lista de variables que TODA piel debe definir. Este archivo
   no es una piel: son los valores por defecto y la documentación.

   REGLA DE ORO
   Ningún bloque escribe nunca un color, una fuente, un radio ni
   una sombra literal. Todo sale de aquí. Es lo único que permite
   que la misma pieza sirva para una clínica y para un gimnasio.
   ═══════════════════════════════════════════════════════════════ */

:root{

  /* ─── SUPERFICIES ──────────────────────────────────────────
     Cuatro niveles de profundidad. La distancia entre ellos es
     lo que da sensación de capas sin recurrir a sombras.
       sup-1  fondo base de la página
       sup-2  fondo alterno, rompe el ritmo entre secciones
       sup-3  tarjetas y superficies elevadas
       sup-4  hover de tarjeta, o segundo nivel de elevación   */
  --sup-1:#0B0B0F;
  --sup-2:#101017;
  --sup-3:#16161F;
  --sup-4:#1D1D28;

  /* ─── TEXTO ────────────────────────────────────────────────
       tx-1  principal      tx-2  secundario
       tx-3  etiquetas y metadatos (mínimo 4.5:1 sobre sup-1)  */
  --tx-1:#F2F1EC;
  --tx-2:#9A9AA6;
  --tx-3:#787886;

  /* ─── LÍNEAS ───────────────────────────────────────────────
     Separan superficies sin sombras. Tres pesos.              */
  --ln-1:rgba(255,255,255,.08);   /* apenas visible  */
  --ln-2:rgba(255,255,255,.16);   /* borde marcado   */
  --ln-3:rgba(255,255,255,.28);   /* énfasis         */

  /* ─── ACENTO ───────────────────────────────────────────────
       ac        color de marca. Sirve para RELLENOS, bordes e
                 iconos, donde con 3:1 basta. NO se usa como
                 color de texto: para eso está --ac-tx
       ac-bt     fondo del botón: a veces MÁS oscuro que --ac
                 para que el texto de encima cumpla contraste
       ac-tx     el acento adaptado a TEXTO. Igual a --ac cuando
                 el acento ya cumple 4.5:1 sobre todas las
                 superficies de la piel; algo más oscuro (o más
                 claro, en pieles oscuras) cuando no
       ac-txt    texto que va encima del acento
       ac-suave  fondo tenue, para realces y halos
       ac-2      acento secundario, solo para degradados
                 y para diferenciar categorías                 */
  --ac:#4C6BFF;
  --ac-bt:#2440E0;
  --ac-tx:#6B84FF;
  --ac-txt:#FFFFFF;
  --ac-suave:rgba(76,107,255,.13);
  --ac-2:#7C6EE6;

  /* ─── TIPOGRAFÍA ───────────────────────────────────────────
       f-tit   familia de titulares
       f-txt   familia de texto
       f-mono  familia para datos y código (opcional)
       pe-tit  peso de titulares (400 fino · 900 macizo)
       pe-txt  peso del texto corrido
       tr-tit  tracking de titulares (negativo = apretado)
       tr-eti  tracking de etiquetas (positivo = abierto)
       tt-eti  uppercase o none en etiquetas
       tt-tit  uppercase o none en titulares                   */
  --f-tit:'Space Grotesk',Helvetica,Arial,sans-serif;
  --f-txt:'Space Grotesk',Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,'SF Mono',Menlo,monospace;
  --pe-tit:500;
  --pe-txt:400;
  --tr-tit:-.03em;
  --tr-eti:3px;
  --tt-eti:uppercase;
  --tt-tit:none;

  /* ─── FORMA ────────────────────────────────────────────────
     El radio es lo que más cambia la personalidad de una marca.
     0 = técnico y seco · 24px = amable y cercano               */
  --r-min:3px;    /* microelementos, barras   */
  --r-bt:100px;   /* botones y píldoras       */
  --r-cj:0px;     /* tarjetas y cajas         */
  --r-img:0px;    /* imágenes                 */
  --bd:1px;       /* grosor de borde          */

  /* ─── RITMO ────────────────────────────────────────────────
     dens multiplica TODO el espaciado vertical.
     .85 compacto · 1 normal · 1.25 muy respirado              */
  --dens:1;
  --mx:6vw;                                  /* margen lateral    */
  --sec-y:calc(14vh * var(--dens));          /* aire de sección   */
  --gap:calc(20px * var(--dens));            /* separación interna*/
  --ancho:1180px;                            /* medida de lectura */
  --ancho-a:1480px;                          /* contenedor ancho  */

  /* ─── PROFUNDIDAD ──────────────────────────────────────────
     sh-1 reposo · sh-2 elevado. En pieles oscuras suelen ir
     a `none`: ahí la profundidad la dan las líneas.            */
  --sh-1:none;
  --sh-2:none;

  /* ─── TEXTURA ──────────────────────────────────────────────
     grano  intensidad del ruido de fondo (0 a .08)             */
  --grano:.04;
}


/* ══════════ estructura ══════════ */
/* ═══════════════════════════════════════════════════════════════
   ESTRUCTURA · LIBRERÍA ROSET · v2
   ───────────────────────────────────────────────────────────────
   Reset, escalas, retícula y componentes atómicos. Todo consume
   los tokens de la piel activa. Este archivo NO cambia entre
   clientes: es el esqueleto.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 1 · RESET ═══════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  background:var(--sup-1);
  color:var(--tx-1);
  font-family:var(--f-txt);
  font-size:var(--t-txt);
  font-weight:var(--pe-txt);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'kern' 1,'liga' 1;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
table{border-collapse:collapse;width:100%;}
::selection{background:var(--ac-bt);color:var(--ac-txt);}

/* Foco visible: obligatorio, nunca se elimina. */
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:var(--r-min);}

/* Barra de scroll discreta, a juego con la piel */
*{scrollbar-width:thin;scrollbar-color:var(--ln-2) transparent;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--ln-2);border-radius:100px;}
::-webkit-scrollbar-thumb:hover{background:var(--ln-3);}


/* ═══ 2 · ESCALA TIPOGRÁFICA ══════════════════════════════════
   Fluida con clamp(). Nueve pasos: suficientes para construir
   jerarquía, pocos como para no perderse.                      */

:root{
  --t-xxl:clamp(46px,9vw,136px);     /* portada, gran formato  */
  --t-xl: clamp(34px,5.8vw,84px);    /* titular de sección     */
  --t-lg: clamp(27px,3.7vw,54px);    /* subtitular             */
  --t-md: clamp(21px,2.5vw,35px);    /* titular de bloque      */
  --t-sm: clamp(18px,1.9vw,25px);    /* entradilla             */
  --t-txt:clamp(14px,1.15vw,17px);   /* texto corrido          */
  --t-min:13px;                      /* texto menor            */
  --t-eti:10px;                      /* etiquetas MAYÚSCULAS   */
  --t-mic:9px;                       /* microetiquetas         */
}


/* ═══ 3 · TIPOGRAFÍA ══════════════════════════════════════════ */

.t-xxl,.t-xl,.t-lg,.t-md{
  font-family:var(--f-tit);
  font-weight:var(--pe-tit);
  letter-spacing:var(--tr-tit);
  text-transform:var(--tt-tit);
  line-height:1.02;
  text-wrap:balance;
}
.t-xxl{font-size:var(--t-xxl);line-height:.94;
       letter-spacing:calc(var(--tr-tit) - .008em);}   /* más apretado al crecer */
.t-xl {font-size:var(--t-xl);line-height:1;}
.t-lg {font-size:var(--t-lg);line-height:1.06;}
.t-md {font-size:var(--t-md);line-height:1.16;}
.t-sm {font-size:var(--t-sm);line-height:1.42;font-family:var(--f-txt);
       letter-spacing:calc(var(--tr-tit) / 2);text-transform:none;font-weight:400;}

.txt   {color:var(--tx-2);max-width:60ch;}
.txt-c {color:var(--tx-1);}
.txt-t {color:var(--tx-3);}
.med   {max-width:46ch;}
.med-s {max-width:34ch;}
.med-xs{max-width:26ch;}

/* Cifra tabular: para tablas, precios y contadores que no bailen */
.cifra{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;}

/* Etiqueta: el elemento que más carácter de marca aporta */
.eti{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-txt);
  font-size:var(--t-eti);
  letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);
  color:var(--tx-3);
  font-weight:600;
  line-height:1;
}
.eti::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--ac);flex:none;
}
.eti.sin::before{display:none;}
/* Variante con número de sección: 01 — SERVICIOS */
.eti.num::before{
  content:attr(data-n);width:auto;height:auto;border-radius:0;
  background:none;color:var(--ac-tx);font-variant-numeric:tabular-nums;
}
/* Variante con raya larga */
.eti.raya::before{width:26px;height:1px;border-radius:0;}


/* ═══ 4 · RITMO Y RETÍCULA ════════════════════════════════════ */

.sec{padding:var(--sec-y) var(--mx);position:relative;}
.sec-2{background:var(--sup-2);}
.sec-alto{padding-block:calc(var(--sec-y) * 1.4);}
.sec-bajo{padding-block:calc(var(--sec-y) * .55);}
.cont{max-width:var(--ancho);margin-inline:auto;width:100%;}
.cont-a{max-width:var(--ancho-a);margin-inline:auto;width:100%;}

/* Cabecera de sección: eyebrow + titular + entradilla */
.cab{margin-bottom:calc(var(--gap) * 2.4);}
.cab .eti{margin-bottom:calc(var(--gap) * .95);}
.cab .txt{margin-top:calc(var(--gap) * .85);}
.cab.centro{text-align:center;}
.cab.centro .txt{margin-inline:auto;}
.cab.centro .eti{justify-content:center;}

/* Retícula con líneas de 1px entre celdas */
.rej{display:grid;gap:1px;background:var(--ln-1);border:var(--bd) solid var(--ln-1);}
.rej-2{grid-template-columns:repeat(2,1fr);}
.rej-3{grid-template-columns:repeat(3,1fr);}
.rej-4{grid-template-columns:repeat(4,1fr);}
.rej > *{background:var(--sup-1);}
.sec-2 .rej > *{background:var(--sup-2);}

/* Retícula con separación real */
.rej-s{display:grid;gap:var(--gap);}

.flex{display:flex;gap:calc(var(--gap) * .6);flex-wrap:wrap;}
.entre{display:flex;justify-content:space-between;align-items:center;
       gap:var(--gap);flex-wrap:wrap;}
.pila{display:flex;flex-direction:column;gap:calc(var(--gap) * .7);}

/* Regla con etiqueta encima: remate editorial */
.regla{display:flex;align-items:center;gap:16px;margin-block:calc(var(--gap) * 1.4);}
.regla::after{content:'';flex:1;height:var(--bd);background:var(--ln-1);}


/* ═══ 5 · BOTONES ═════════════════════════════════════════════
   Tres niveles. El primario solo puede haber uno por pantalla.  */

.bt,.bt-2,.bt-3{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:16px 28px;min-height:48px;
  border-radius:var(--r-bt);
  font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);font-weight:700;line-height:1;
  border:var(--bd) solid transparent;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color var(--d-corta) var(--e-suave),
             border-color var(--d-corta) var(--e-suave),
             background var(--d-corta) var(--e-suave),
             transform var(--d-micro) var(--e-suave);
  white-space:nowrap;
}
.bt svg,.bt-2 svg,.bt-3 svg{width:15px;height:15px;stroke-width:1.8;fill:none;
                            stroke:currentColor;flex:none;}
.bt:active,.bt-2:active,.bt-3:active{transform:scale(.98);}

/* Primario y secundario. Aquí SOLO el aspecto en reposo:
   cómo reaccionan al ratón lo decide gestos.css, que cambia
   con cada piel. */
.bt{background:var(--ac-bt);color:var(--ac-txt);}
.bt-2{background:none;color:var(--tx-1);border-color:var(--ln-2);}

/* La etiqueta siempre por encima del efecto de fondo */
.bt .et,.bt-2 .et{position:relative;z-index:2;}
/* El motor duplica la etiqueta para el gesto «rodar».
   En los demás gestos la copia sobra y no se pinta. */
.bt .et > span:nth-child(2),
.bt-2 .et > span:nth-child(2){display:none;}

/* Fantasma: solo texto, para acciones terciarias */
.bt-3{background:none;color:var(--tx-2);padding-inline:0;min-height:auto;}
.bt-3:hover{color:var(--ac-tx);}

/* Botón en línea de texto */
.en{position:relative;padding-bottom:2px;color:var(--ac-tx);
    transition:color var(--d-micro) var(--e-suave);}
.en::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--d-corta) var(--e-suave);pointer-events:none;
}
.en:hover::after{transform:scaleX(1);transform-origin:left;}


/* ═══ 6 · CHIPS Y DISTINTIVOS ═════════════════════════════════ */

.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-2);font-weight:600;
  border:var(--bd) solid var(--ln-1);border-radius:var(--r-bt);
  padding:8px 15px;line-height:1;
  transition:color var(--d-micro) var(--e-suave),
             border-color var(--d-micro) var(--e-suave),
             background var(--d-micro) var(--e-suave);
}
.chip{position:relative;}
.chip:hover{color:var(--tx-1);border-color:var(--ln-2);}
.chip.ac{color:var(--ac-tx);border-color:var(--ac);background:var(--ac-suave);}
.chip.solido{background:var(--ac-bt);color:var(--ac-txt);border-color:transparent;}

/* Distintivo pequeño, para estados */
.dist{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-mic);letter-spacing:2px;text-transform:uppercase;
  font-weight:700;padding:4px 9px;border-radius:var(--r-min);
  background:var(--ac-suave);color:var(--ac-tx);line-height:1;
}
.dist i{width:5px;height:5px;border-radius:50%;background:currentColor;}


/* ═══ 7 · TARJETAS ════════════════════════════════════════════ */

.tj{
  background:var(--sup-3);
  border:var(--bd) solid var(--ln-1);
  border-radius:var(--r-cj);
  padding:calc(var(--gap) * 1.7);
  box-shadow:var(--sh-1);
  position:relative;overflow:hidden;
  transition:border-color var(--d-corta) var(--e-suave),
             background var(--d-corta) var(--e-suave),
             box-shadow var(--d-corta) var(--e-suave),
             transform var(--d-corta) var(--e-suave);
}
.tj:hover{background:var(--sup-4);border-color:var(--ln-2);box-shadow:var(--sh-2);}

/* Línea de acento que se dibuja arriba al pasar por encima */
.tj.linea::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--ac);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-corta) var(--e-suave);
}
.tj.linea:hover::before{transform:scaleX(1);}

/* Marca de esquina: remate técnico */
.tj.esquina::after{
  content:'';position:absolute;top:12px;right:12px;width:7px;height:7px;
  border-top:var(--bd) solid var(--ln-2);border-right:var(--bd) solid var(--ln-2);
  transition:border-color var(--d-corta) var(--e-suave);
}
.tj.esquina:hover::after{border-color:var(--ac);}

/* Icono dentro de tarjeta */
.ic{
  width:46px;height:46px;flex:none;
  border:var(--bd) solid var(--ln-2);border-radius:var(--r-cj);
  display:flex;align-items:center;justify-content:center;
  color:var(--ac-tx);
  transition:border-color var(--d-corta) var(--e-suave),
             background var(--d-corta) var(--e-suave);
}
.ic svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.35;fill:none;
        stroke-linecap:round;stroke-linejoin:round;}
.tj:hover .ic,a:hover .ic{border-color:var(--ac);background:var(--ac-suave);}


/* ═══ 8 · FORMULARIOS ═════════════════════════════════════════ */

.campo{display:block;position:relative;}
.campo > span{
  display:block;font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);margin-bottom:10px;font-weight:600;
}
.campo input,.campo textarea,.campo select{
  width:100%;background:none;color:var(--tx-1);
  border:0;border-bottom:var(--bd) solid var(--ln-2);
  border-radius:0;padding:13px 0;font-size:var(--t-txt);
  transition:border-color var(--d-corta) var(--e-suave);
}
.campo textarea{resize:vertical;min-height:118px;}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-bottom-color:var(--ac);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tx-3);opacity:.75;}
/* Subrayado de acento que crece desde el centro al enfocar */
.campo::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--ac);transform:scaleX(0);
  transition:transform var(--d-corta) var(--e-suave);pointer-events:none;
}
.campo:focus-within::after{transform:scaleX(1);}

/* Campo en caja, para pieles más amables */
.campo.caja input,.campo.caja textarea,.campo.caja select{
  border:var(--bd) solid var(--ln-2);border-radius:var(--r-cj);
  padding:14px 16px;background:var(--sup-3);
}
.campo.caja::after{display:none;}
.campo.caja input:focus,.campo.caja textarea:focus{border-color:var(--ac);}

.acepto{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-min);
        color:var(--tx-3);}
.acepto input{width:18px;height:18px;margin-top:2px;accent-color:var(--ac);flex:none;}
.acepto a{color:var(--ac-tx);text-decoration:underline;text-underline-offset:2px;}


/* ═══ 9 · IMÁGENES DE RELLENO ═════════════════════════════════
   Se sustituyen por la foto real del cliente. Mientras tanto,
   comunican proporción y encuadre sin ensuciar la maqueta.     */

.ph{
  /* El hueco de la foto tiene que VERSE, y sobre todo tiene que verse
     su BORDE: si no, cualquier animación de cortina o de recorte pasa
     por encima de un rectángulo del mismo color que el fondo y no se
     aprecia nada. Antes iba al 8 % y sobre una piel blanca quedaba en
     blanco sobre blanco.
     Al 16 % con el borde a --ln-2 se separa en las doce pieles. */
  background:
    radial-gradient(120% 90% at 25% 15%,var(--ac-suave),transparent 58%),
    color-mix(in srgb,var(--tx-1) 16%,var(--sup-2));
  border:var(--bd) solid var(--ln-2);
  border-radius:var(--r-img);
  display:flex;align-items:center;justify-content:center;
  color:var(--tx-3);font-size:var(--t-mic);
  letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);font-weight:600;
  overflow:hidden;position:relative;
}
.ph::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(color-mix(in srgb,var(--tx-1) 14%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--tx-1) 14%,transparent) 1px,transparent 1px);
  background-size:26px 26px;
}
/* Cruz de encuadre en el centro: detalle de maqueta profesional */
.ph::after{
  content:'';position:absolute;left:50%;top:50%;width:26px;height:26px;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.7;
  background:
    linear-gradient(var(--ln-3),var(--ln-3)) center/1px 100% no-repeat,
    linear-gradient(var(--ln-3),var(--ln-3)) center/100% 1px no-repeat;
}
.ph > *{position:relative;z-index:1;background:var(--sup-1);padding:6px 12px;
        border:var(--bd) solid var(--ln-2);border-radius:var(--r-min);color:var(--tx-2);}
.ph-16-9{aspect-ratio:16/9;}
.ph-3-2 {aspect-ratio:3/2;}
.ph-4-3 {aspect-ratio:4/3;}
.ph-1-1 {aspect-ratio:1/1;}
.ph-3-4 {aspect-ratio:3/4;}
.ph-9-16{aspect-ratio:9/16;}


/* ═══ 10 · LISTAS Y TABLAS ════════════════════════════════════ */

/* Lista con marca de verificación */
.lista-v li{display:grid;grid-template-columns:19px 1fr;gap:13px;align-items:start;
            padding:9px 0;color:var(--tx-2);}
.lista-v svg{width:16px;height:16px;stroke:var(--ac);stroke-width:1.8;fill:none;
             margin-top:4px;stroke-linecap:round;stroke-linejoin:round;}

/* Lista con punto */
.lista-p li{display:grid;grid-template-columns:16px 1fr;gap:13px;align-items:start;
            padding:8px 0;color:var(--tx-2);}
.lista-p li::before{content:'';width:5px;height:5px;border-radius:50%;
                    background:var(--ac);margin-top:11px;}

/* Fila de datos: etiqueta a la izquierda, valor a la derecha */
.datos li{display:flex;justify-content:space-between;gap:18px;padding:12px 0;
          border-bottom:var(--bd) solid var(--ln-1);font-size:var(--t-txt);}
.datos li:last-child{border-bottom:0;}
.datos li span{color:var(--tx-3);}
.datos li b{color:var(--tx-1);font-weight:600;text-align:right;}

.tabla th{text-align:left;font-size:var(--t-eti);letter-spacing:var(--tr-eti);
          text-transform:var(--tt-eti);color:var(--tx-3);font-weight:700;
          padding:0 22px 14px 0;border-bottom:var(--bd) solid var(--ln-2);}
.tabla td{padding:17px 22px 17px 0;border-bottom:var(--bd) solid var(--ln-1);
          color:var(--tx-2);vertical-align:top;}
.tabla tbody tr{transition:background var(--d-corta) var(--e-suave);}
.tabla tbody tr:hover{background:var(--ac-suave);}


/* ═══ 11 · UTILIDADES ═════════════════════════════════════════ */

.ac{color:var(--ac-tx);}
.centro{text-align:center;}
.centro .txt{margin-inline:auto;}
.centro .eti{justify-content:center;}
.hr{height:var(--bd);background:var(--ln-1);border:0;}
.rel{position:relative;}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;
        clip-path:inset(50%);white-space:nowrap;}
.no-movil{display:initial;}
.solo-movil{display:none;}


/* ═══ 12 · RESPONSIVE ═════════════════════════════════════════ */

@media (max-width:1100px){
  .rej-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:960px){
  :root{--mx:22px;--sec-y:calc(9vh * var(--dens));}
  .rej-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  :root{--mx:17px;}
  .rej-2,.rej-3,.rej-4{grid-template-columns:1fr;}
  .bt,.bt-2{padding:16px 24px;width:100%;}   /* pulgar cómodo */
  .flex > .bt,.flex > .bt-2{width:auto;flex:1 1 auto;}
  .no-movil{display:none;}
  .solo-movil{display:initial;}
  .datos li{flex-direction:column;gap:3px;}
  .datos li b{text-align:left;}
}

/* Impresión: que un presupuesto o una página legal salga legible */
@media print{
  body{background:#fff;color:#000;}
  .bt,.bt-2,nav,[data-progreso],.mv-halo{display:none!important;}
  *{box-shadow:none!important;}
}


/* ═══ ZONA TÁCTIL ═════════════════════════════════════════════
   En pantalla táctil, el dedo cubre unos 9 mm: los objetivos de
   menos de 44 px se fallan constantemente. En vez de engordar
   los elementos —lo que rompería la maqueta— se les extiende el
   área sensible con un pseudoelemento invisible. La tipografía y
   los espacios quedan exactamente igual; sólo crece lo que se
   puede tocar.

   Nada de esto se aplica con ratón: ahí el puntero es preciso y
   una caja de 44 px alrededor de cada enlace de un párrafo se
   comería los enlaces vecinos.                                  */

@media (pointer:coarse){
  .en,.chip,.b-mg a,.priv{position:relative;}

  .en::before,
  a.chip::before,
  .b-mg a::before{
    content:'';position:absolute;
    /* centrado sobre el elemento, sin desplazar nada */
    left:0;right:0;top:50%;height:44px;transform:translateY(-50%);
    pointer-events:auto;
  }
  /* Los enlaces dentro de un párrafo van en varias líneas y ahí
     una caja de 44 px pisaría la línea de arriba. Se limita a los
     que van sueltos, que son los que de verdad cuesta acertar. */
  p .en::before,li .en::before{height:34px;}

  /* La casilla del formulario: la etiqueta entera ya es tocable,
     pero la casilla en sí debe poder pulsarse por su cuenta. */
  input[type="checkbox"],input[type="radio"]{
    min-width:22px;min-height:22px;
  }
}


/* ══════════ movimiento ══════════ */
/* ═══════════════════════════════════════════════════════════════
   MOVIMIENTO · LIBRERÍA ROSET
   ───────────────────────────────────────────────────────────────
   Los estados visuales que usa motor.js. El JavaScript solo pone
   y quita clases: toda la animación vive aquí, en CSS, que es
   donde el navegador la puede optimizar.

   PRINCIPIO
   Nada se mueve por decorar. Cada animación comunica una de tres
   cosas: jerarquía (qué miro primero), estado (qué ha cambiado)
   o continuidad (de dónde viene esto). Si no comunica nada, sobra.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Curvas. Solo cuatro en toda la librería. */
  --e-salida:cubic-bezier(.16,1,.3,1);        /* entradas: rápido y frena  */
  --e-suave:cubic-bezier(.4,0,.2,1);          /* transición estándar        */
  --e-entrada:cubic-bezier(.7,0,.84,0);       /* salidas: acelera y se va   */
  --e-rebote:cubic-bezier(.34,1.4,.64,1);     /* acentos puntuales          */

  /* Duraciones canónicas */
  --d-micro:.22s;    /* microinteracción: hover, foco        */
  --d-corta:.45s;    /* transición estándar                  */
  --d-media:.75s;    /* entrada de elemento                  */
  --d-larga:1.1s;    /* revelado de sección, movimiento largo */
}

/* ═══ 1 · REVELADOS ═══════════════════════════════════════════
   Desde la v3, la animación de entrada NO vive aquí: la construye
   motor.js con la API de animaciones del navegador, que es la
   única forma de poder cancelar y relanzar sin trucos.

   Lo que queda en este archivo es el ANDAMIO: el estado previo,
   las piezas que hay que montar para poder trocear un elemento, y
   la versión quieta para quien no quiere movimiento.

   OJO con la especificidad: el estado previo lleva SIEMPRE
   :not(.mv-visto). Sin eso, una clase de dos partes le gana a
   .mv-visto y el elemento no aparece nunca. Es un fallo
   silencioso: en el editor se ve bien y en el navegador está
   todo en blanco.                                               */

.mv-porVenir:not(.mv-visto){opacity:0;}
.mv-porVenir{will-change:transform,opacity,filter,clip-path;}
.mv-visto{will-change:auto;}

/* ─── Troceado de texto ─────────────────────────────────────── */

/* Líneas: cada una en un recorte propio, para que la de dentro
   pueda subir desde debajo sin asomar por arriba. */
.mv-l{display:block;overflow:hidden;}
.mv-li{display:block;transform-origin:0 100%;}
.mv-p{font-style:normal;}

/* Palabras y letras: en línea, pero con caja propia para poder
   moverlas en 3D. white-space:pre en las letras conserva los
   espacios, que si no se colapsan. */
.mv-w{display:inline-block;transform-origin:50% 100%;}
.mv-c{display:inline-block;white-space:pre;transform-origin:50% 60%;}

/* Máquina de escribir: el cursor solo existe mientras escribe. */
.mv-cursor::after{content:'';display:inline-block;width:.08em;height:1em;
  background:var(--ac);margin-left:.06em;vertical-align:-.12em;
  animation:mv-parpadeo .9s steps(2,end) infinite;}
@keyframes mv-parpadeo{50%{opacity:0;}}

/* ─── Lamas: romper una pieza en franjas ────────────────────── */

/* El núcleo es el contenido de verdad; las lamas son copias
   recortadas que se animan y luego desaparecen. Van con
   aria-hidden, así que el lector de pantalla solo ve el núcleo. */
.mv-nucleo{display:block;}
.mv-lama{display:block;pointer-events:none;}

/* ─── Piezas de apoyo de algunos revelados ──────────────────── */

/* La hoja de luz de «cuchilla». Usa el acento, pero mezclado con
   blanco: sobre una piel clara, el acento a secas casi no se ve
   pasar. Con el degradado de tres paradas se ve el filo. */
.mv-filo{position:absolute;inset:-2px;z-index:6;pointer-events:none;
  background:linear-gradient(100deg,
    transparent 42%,
    color-mix(in srgb,var(--ac) 55%,white) 49%,
    var(--ac) 50%,
    color-mix(in srgb,var(--ac) 55%,white) 51%,
    transparent 58%);
  mix-blend-mode:normal;}

/* El borde que se dibuja en «contorno». */
.mv-trazo{position:absolute;inset:0;z-index:5;pointer-events:none;
  border:2px solid var(--ac);
  animation:mv-trazar .85s cubic-bezier(.16,1,.3,1) both;}
@keyframes mv-trazar{
  0%  {clip-path:inset(0 100% 0 0);opacity:1;}
  70% {clip-path:inset(0 0 0 0);opacity:1;}
  100%{clip-path:inset(0 0 0 0);opacity:0;}
}

/* Los ecos van detrás y no se leen. */
.mv-eco{pointer-events:none;filter:blur(1px);}

/* Línea que se dibuja al entrar: separadores y subrayados. */
.mv-linea{transform:scaleX(0);transform-origin:left;
          transition:transform var(--d-larga) var(--e-salida);}
.mv-linea.mv-visto{transform:scaleX(1);}


/* ═══ 1b · MOVIMIENTO REDUCIDO ════════════════════════════════
   Quien lo tenga activado ve la misma web, entera y quieta. El
   motor ni siquiera construye las piezas: no hay lamas, ni
   troceo de texto, ni filtros. No es una degradación.          */

.mv-quieto{opacity:1!important;transform:none!important;
  filter:none!important;clip-path:none!important;}

@media (prefers-reduced-motion:reduce){
  .mv-porVenir,.mv-porVenir:not(.mv-visto){
    opacity:1!important;transform:none!important;
    filter:none!important;clip-path:none!important;}
  .mv-lama,.mv-eco,.mv-filo,.mv-trazo{display:none!important;}
  .mv-nucleo{visibility:visible!important;}
  .mv-linea{transform:scaleX(1)!important;transition:none!important;}
}


/* ═══ 2b · EFECTOS LIGADOS AL SCROLL ══════════════════════════ */

/* Escala ligada al scroll: la imagen se asienta mientras subes.
   OJO: ponlo SIEMPRE en un elemento dentro de un contenedor con
   overflow:hidden. Si lo pones en la propia celda de la retícula,
   al escalar se sale por los lados y aparece scroll horizontal
   en móvil. */
[data-escala-scroll]{transform:scale(var(--esc,1.14));transform-origin:center;
  will-change:transform;}

/* Giro ligado al scroll, para marcas y sellos */
[data-girar]{will-change:transform;}

/* Tarjetas que se apilan: cada una se queda pegada y la siguiente
   se le monta encima. Muy usado en producto digital. */
[data-apilar] > *{position:sticky;}
[data-apilar] > *:nth-child(1){top:calc(12vh + 0px);}
[data-apilar] > *:nth-child(2){top:calc(12vh + 18px);}
[data-apilar] > *:nth-child(3){top:calc(12vh + 36px);}
[data-apilar] > *:nth-child(4){top:calc(12vh + 54px);}
[data-apilar] > *:nth-child(5){top:calc(12vh + 72px);}

/* Texto que se ilumina palabra a palabra al pasar por él */
[data-resaltar] .mv-r{color:var(--tx-3);
  transition:color .35s var(--e-suave);}
[data-resaltar] .mv-r.on{color:var(--tx-1);}


/* ═══ 5b · PUNTERO ════════════════════════════════════════════ */

/* Vista previa flotante: al pasar por una fila de la lista aparece
   su imagen siguiendo al cursor. El gesto más «estudio» que hay. */
.mv-previa{position:fixed;top:0;left:0;z-index:80;pointer-events:none;
  width:clamp(200px,20vw,320px);aspect-ratio:4/3;
  border-radius:var(--r-img);overflow:hidden;
  opacity:0;transform:translate(-50%,-50%) scale(.9);
  transition:opacity .3s var(--e-suave),transform .45s var(--e-salida);}
.mv-previa.on{opacity:1;transform:translate(-50%,-50%) scale(1);}
.mv-previa .ph{width:100%;height:100%;border:0;border-radius:0;}
@media (hover:none){.mv-previa{display:none;}}


/* ═══ 2 · SCROLL HORIZONTAL ═══════════════════════════════════ */

[data-horizontal]{position:relative;}
[data-horizontal] .mv-hz-marco{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;overflow:hidden;
}
[data-hz-pista]{
  display:flex;align-items:stretch;
  will-change:transform;
}
/* Versión plana: en móvil y con movimiento reducido pasa a lista */
[data-horizontal].mv-hz-plano{height:auto!important;}
[data-horizontal].mv-hz-plano .mv-hz-marco{
  position:static;height:auto;display:block;overflow:visible;
}
[data-horizontal].mv-hz-plano [data-hz-pista]{
  display:grid;grid-template-columns:1fr;transform:none!important;
}

/* Barra de progreso del recorrido horizontal */
.mv-hz-barra{position:relative;height:2px;background:var(--ln-1);overflow:hidden;}
.mv-hz-barra i{position:absolute;inset:0;background:var(--ac);
  transform:scaleX(var(--p,0));transform-origin:left;}


/* ═══ 3 · SECCIÓN ANCLADA ═════════════════════════════════════ */

[data-fijar]{position:relative;}
[data-fijar] > *:first-child{width:100%;left:0;}


/* ═══ 4 · MARQUESINA ══════════════════════════════════════════ */

/* Versión de respaldo con animación CSS, por si el motor no corre */
@keyframes mv-cinta{from{transform:translate3d(0,0,0)}
                    to{transform:translate3d(-50%,0,0)}}
.mv-cinta{display:flex;width:max-content;
          animation:mv-cinta var(--mq-t,28s) linear infinite;}
.mv-cinta:hover{animation-play-state:paused;}
.mv-cinta.al-reves{animation-direction:reverse;}

/* Cuando la mueve el motor, la cinta ACELERA Y SE INVIERTE con el
   scroll. Es lo que hace que una tira de logotipos deje de parecer
   un adorno y parezca parte de la página. */
[data-marquesina].mv-manual{overflow:hidden;}
[data-marquesina].mv-manual .mv-env{display:flex;width:max-content;
  will-change:transform;}
[data-marquesina].mv-manual > *:not(.mv-env){display:none;}
[data-marquesina].mv-quieta .mv-cinta{animation:none;}


/* ═══ 4b · VELO DE ENTRADA ════════════════════════════════════
   La página «abre» en vez de aparecer de golpe. Se retira solo
   y el motor lo borra del documento al terminar.               */

[data-velo]{position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:var(--sup-1);
  transform:translateY(0);
  transition:transform 1.05s var(--e-salida);}
[data-velo].fuera{transform:translateY(-101%);}
[data-velo] span{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:clamp(22px,3vw,42px);letter-spacing:var(--tr-tit);
  text-transform:var(--tt-tit);color:var(--tx-1);
  transition:opacity .45s var(--e-suave);}
[data-velo].fuera span{opacity:0;}
/* Variante que se abre por el centro, para pieles elegantes */
[data-velo="centro"]{transition:clip-path 1.1s var(--e-salida);
  clip-path:inset(0 0 0 0);transform:none;}
[data-velo="centro"].fuera{clip-path:inset(50% 0 50% 0);}
@media (prefers-reduced-motion:reduce){[data-velo]{display:none!important;}}


/* ═══ 5 · MICROINTERACCIONES ══════════════════════════════════
   El detalle que separa una web correcta de una web cuidada.    */

/* Flecha que avanza */
.mv-fl{display:inline-block;transition:transform var(--d-corta) var(--e-salida);}
.mv-padre:hover .mv-fl,
a:hover > .mv-fl,button:hover > .mv-fl{transform:translateX(5px);}

/* Subrayado que se dibuja de izquierda a derecha y sale por la derecha */
.mv-sub{position:relative;}
.mv-sub::after{
  content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--d-corta) var(--e-suave);pointer-events:none;
}
.mv-sub:hover::after{transform:scaleX(1);transform-origin:left;}

/* Relleno que sube desde abajo */
.mv-relleno{position:relative;overflow:hidden;isolation:isolate;}
.mv-relleno::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--ac);
  transform:scaleY(0);transform-origin:bottom;pointer-events:none;
  transition:transform var(--d-corta) var(--e-suave);
}
.mv-relleno:hover::before{transform:scaleY(1);}

/* Imagen que respira al pasar por encima */
.mv-zoom{overflow:hidden;}
.mv-zoom > img,.mv-zoom > .ph{
  transition:transform 1.1s var(--e-salida),filter var(--d-corta) var(--e-suave);
}
.mv-zoom:hover > img,.mv-zoom:hover > .ph{transform:scale(1.045);}

/* Atenuar los hermanos al enfocar uno: dirige la mirada */
.mv-foco:hover > *{opacity:.42;transition:opacity var(--d-corta) var(--e-suave);}
.mv-foco > *:hover{opacity:1;}

/* Recorte que se abre al pasar por encima */
.mv-cortina{position:relative;overflow:hidden;}
.mv-cortina .mv-capa{
  position:absolute;inset:0;background:var(--ac);
  transform:translate3d(0,101%,0);
  transition:transform var(--d-corta) var(--e-suave);pointer-events:none;
}
.mv-cortina:hover .mv-capa{transform:translate3d(0,0,0);}


/* ═══ 6 · APOYOS ══════════════════════════════════════════════ */

/* Grano finísimo: quita el aspecto plano de los fondos grandes */
.mv-grano::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:var(--grano,.04);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Halo que late, para llamadas a la acción */
@keyframes mv-latido{
  0%,100%{opacity:.72;transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:1;  transform:translate(-50%,-50%) scale(1.09)}
}
.mv-halo{
  position:absolute;left:50%;top:50%;pointer-events:none;
  width:min(900px,120vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--ac-suave),transparent 62%);
  animation:mv-latido 7s ease-in-out infinite;
}

/* Punto de estado que parpadea despacio */
@keyframes mv-pulso{0%,100%{opacity:1}50%{opacity:.35}}
.mv-vivo{animation:mv-pulso 2.4s ease-in-out infinite;}

/* Barra de progreso de lectura */
.mv-progreso{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:9996;
  background:var(--ac);transform:scaleX(0);transform-origin:left;
  pointer-events:none;
}


/* ═══ 7 · MOVIMIENTO REDUCIDO ═════════════════════════════════
   No es una versión pobre: es la misma web, quieta y completa.
   Los revelados ya se neutralizan arriba; aquí quedan los
   efectos ligados al scroll y al puntero.                      */

@media (prefers-reduced-motion:reduce){
  [data-escala-scroll]{transform:none!important;}
  [data-apilar] > *{position:static!important;}
  [data-resaltar] .mv-r{color:var(--tx-1)!important;}
  .mv-previa{display:none!important;}
  .mv-cinta{animation:none!important;}
  .mv-halo{animation:none!important;}
  .mv-vivo{animation:none!important;}
  .mv-cursor::after{display:none!important;}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}


/* ══════════ gestos ══════════ */
/* ═══════════════════════════════════════════════════════════════
   GESTOS · LIBRERÍA ROSET
   ───────────────────────────────────────────────────────────────
   Cómo reacciona cada marca cuando le pasas el ratón por encima.

   POR QUÉ EXISTE ESTE ARCHIVO
   Las pieles cambiaban color, tipografía y forma — pero el botón
   se comportaba igual en las doce. Y el gesto es justo donde se
   nota si una web está cuidada: es lo único que responde a la
   persona que está delante.

   Ocho personalidades. Cada piel declara la suya con data-gesto
   en el <html>, al lado de data-piel.

     brillo    un destello barre el botón            técnico
     relleno   el color sube desde abajo             sobrio
     rodar     la etiqueta rueda y entra otra igual  enérgico
     expandir  un círculo crece desde el centro      amable
     linea     una línea fina recorre el borde       elegante
     onda      ondas desde donde está el cursor      cálido
     sello     se hunde como un sello de tinta       artesanal
     halo      resplandor que crece alrededor        digital

   REGLA
   Un gesto se aplica a TODO lo interactivo de esa web: botones,
   enlaces, tarjetas, chips y navegación. Media web con un gesto
   y media con otro no se lee como una marca, se lee como un
   apaño.
   ═══════════════════════════════════════════════════════════════ */


/* ═══ BASE COMÚN ══════════════════════════════════════════════
   Lo que comparten todos: el envoltorio, no la reacción.       */

.bt,.bt-2{position:relative;overflow:hidden;isolation:isolate;}
.bt .et,.bt-2 .et{position:relative;z-index:2;display:inline-flex;
  align-items:center;gap:11px;}


/* ═══ 1 · BRILLO ══════════════════════════════════════════════
   Un destello diagonal cruza el botón. Limpio y técnico: no
   promete nada, solo confirma que el elemento está vivo.        */

[data-gesto="brillo"] .bt::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 22%,
             color-mix(in srgb,var(--ac-txt) 30%,transparent) 50%,transparent 78%);
  transform:translateX(-115%);
  transition:transform .78s var(--e-salida);}
[data-gesto="brillo"] .bt:hover::before{transform:translateX(115%);}

[data-gesto="brillo"] .bt-2::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--ac-bt);transform:scaleY(0);transform-origin:bottom;
  transition:transform var(--d-corta) var(--e-suave);}
[data-gesto="brillo"] .bt-2:hover{color:var(--ac-txt);border-color:var(--ac);}
[data-gesto="brillo"] .bt-2:hover::before{transform:scaleY(1);}

[data-gesto="brillo"] .tj:hover{border-color:var(--ac);}
[data-gesto="brillo"] .chip:hover{border-color:var(--ac);color:var(--ac-tx);}


/* ═══ 2 · RELLENO ═════════════════════════════════════════════
   El color sube desde abajo y llena la pieza. Sin sobresaltos:
   el gesto de quien no necesita llamar la atención.             */

[data-gesto="relleno"] .bt::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:color-mix(in srgb,var(--tx-1) 22%,var(--ac-bt));
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .42s var(--e-salida);}
[data-gesto="relleno"] .bt:hover::before{transform:scaleY(1);}

[data-gesto="relleno"] .bt-2::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--ac-bt);transform:scaleY(0);transform-origin:bottom;
  transition:transform .42s var(--e-salida);}
[data-gesto="relleno"] .bt-2:hover{color:var(--ac-txt);border-color:var(--ac);}
[data-gesto="relleno"] .bt-2:hover::before{transform:scaleY(1);}

[data-gesto="relleno"] .tj{position:relative;}
[data-gesto="relleno"] .tj::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--ac);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-corta) var(--e-salida);}
[data-gesto="relleno"] .tj:hover::after{transform:scaleX(1);}
[data-gesto="relleno"] .chip:hover{background:var(--ac-suave);color:var(--ac-tx);
  border-color:var(--ac);}


/* ═══ 3 · RODAR ═══════════════════════════════════════════════
   La etiqueta rueda hacia arriba y entra otra idéntica por abajo.
   El motor duplica el texto. Es el gesto más enérgico: promete
   que al otro lado pasa algo.                                   */

[data-gesto="rodar"] .bt .et,
[data-gesto="rodar"] .bt-2 .et{overflow:hidden;height:1em;line-height:1;
  display:inline-flex;flex-direction:column;align-items:flex-start;
  gap:0;}   /* con gap, la copia cae fuera del recorte y no entra nunca */
[data-gesto="rodar"] .bt .et > span,
[data-gesto="rodar"] .bt-2 .et > span{
  display:flex!important;align-items:center;gap:11px;height:1em;
  transition:transform .44s var(--e-salida);}
[data-gesto="rodar"] .bt:hover .et > span,
[data-gesto="rodar"] .bt-2:hover .et > span{transform:translateY(-100%);}

[data-gesto="rodar"] .bt::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:color-mix(in srgb,var(--tx-1) 16%,var(--ac-bt));
  transform:translateY(101%);transition:transform .44s var(--e-salida);}
[data-gesto="rodar"] .bt:hover::before{transform:translateY(0);}
[data-gesto="rodar"] .bt-2:hover{border-color:var(--ac);color:var(--ac-tx);}

[data-gesto="rodar"] .tj{transition:transform .3s var(--e-rebote),
                                    border-color var(--d-corta) var(--e-suave);}
[data-gesto="rodar"] .tj:hover{transform:scale(1.015);border-color:var(--ac);}
[data-gesto="rodar"] .chip{transition:transform .3s var(--e-rebote),
                                      color .2s,border-color .2s;}
[data-gesto="rodar"] .chip:hover{transform:scale(1.07);color:var(--ac-tx);
  border-color:var(--ac);}


/* ═══ 4 · EXPANDIR ════════════════════════════════════════════
   Un círculo crece desde el centro hasta llenar la pieza.
   Redondo y amable, como el resto de estas marcas.              */

[data-gesto="expandir"] .bt::before,
[data-gesto="expandir"] .bt-2::before{
  content:'';position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;
  width:130%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .5s var(--e-salida);}
[data-gesto="expandir"] .bt::before{
  background:color-mix(in srgb,var(--tx-1) 20%,var(--ac-bt));}
[data-gesto="expandir"] .bt-2::before{background:var(--ac-bt);}
[data-gesto="expandir"] .bt:hover::before,
[data-gesto="expandir"] .bt-2:hover::before{transform:translate(-50%,-50%) scale(1);}
[data-gesto="expandir"] .bt-2:hover{color:var(--ac-txt);border-color:var(--ac);}

[data-gesto="expandir"] .tj{transition:box-shadow var(--d-corta) var(--e-suave),
                                       border-color var(--d-corta) var(--e-suave);}
[data-gesto="expandir"] .tj:hover{box-shadow:var(--sh-2);border-color:var(--ac);}
[data-gesto="expandir"] .chip:hover{background:var(--ac-bt);color:var(--ac-txt);
  border-color:var(--ac);}


/* ═══ 5 · LINEA ═══════════════════════════════════════════════
   Una línea fina recorre el borde. Casi no se ve, y esa es la
   idea: en alta gama, el gesto discreto vale más que el efecto. */

[data-gesto="linea"] .bt::after,
[data-gesto="linea"] .bt-2::after{
  content:'';position:absolute;inset:3px;z-index:1;pointer-events:none;
  border:1px solid var(--ac);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .55s var(--e-salida);}
/* En el primario el fondo ya es el acento: la línea va en el color
   del texto, o no se ve nada. */
[data-gesto="linea"] .bt::after{border-color:var(--ac-txt);opacity:.7;}
[data-gesto="linea"] .bt:hover::after,
[data-gesto="linea"] .bt-2:hover::after{clip-path:inset(0 0 0 0);}
[data-gesto="linea"] .bt:hover{filter:brightness(1.09);}
[data-gesto="linea"] .bt-2:hover{color:var(--ac-tx);}

[data-gesto="linea"] .tj::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:1px;
  background:var(--ac);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--e-salida);}
[data-gesto="linea"] .tj:hover::before{transform:scaleX(1);}
[data-gesto="linea"] .tj:hover{background:var(--sup-3);}
[data-gesto="linea"] .chip:hover{color:var(--ac-tx);border-color:var(--ac);
  letter-spacing:calc(var(--tr-eti) + 1px);}


/* ═══ 6 · ONDA ════════════════════════════════════════════════
   Ondas que salen de donde está el cursor. El motor guarda la
   posición del puntero en --px y --py. Cálido y físico.         */

[data-gesto="onda"] .bt::before,
[data-gesto="onda"] .bt-2::before{
  content:'';position:absolute;left:var(--px,50%);top:var(--py,50%);z-index:1;
  width:0;height:0;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .6s var(--e-salida),height .6s var(--e-salida),
             opacity .5s var(--e-suave);
  opacity:0;}
[data-gesto="onda"] .bt::before{
  background:color-mix(in srgb,var(--tx-1) 24%,var(--ac-bt));}
[data-gesto="onda"] .bt-2::before{background:var(--ac-bt);}
[data-gesto="onda"] .bt:hover::before,
[data-gesto="onda"] .bt-2:hover::before{width:260%;height:260%;opacity:1;}
[data-gesto="onda"] .bt-2:hover{color:var(--ac-txt);border-color:var(--ac);}

[data-gesto="onda"] .tj{transition:transform .5s var(--e-salida),
                                   box-shadow .5s var(--e-salida);}
[data-gesto="onda"] .tj:hover{box-shadow:var(--sh-2);border-color:var(--ln-2);}
[data-gesto="onda"] .chip:hover{background:var(--ac-suave);color:var(--ac-tx);}


/* ═══ 7 · SELLO ═══════════════════════════════════════════════
   Se hunde, como un sello de tinta contra el papel. Sin brillos
   ni degradados: el gesto de lo hecho a mano.                   */

[data-gesto="sello"] .bt,
[data-gesto="sello"] .bt-2{transition:transform .16s var(--e-suave),
  box-shadow .16s var(--e-suave),background .3s var(--e-suave),
  color .3s var(--e-suave),border-color .3s var(--e-suave);}
[data-gesto="sello"] .bt{box-shadow:3px 3px 0 0 color-mix(in srgb,var(--tx-1) 78%,transparent);}
[data-gesto="sello"] .bt:hover{transform:translate(3px,3px);box-shadow:0 0 0 0;}
[data-gesto="sello"] .bt-2{box-shadow:3px 3px 0 0 var(--ln-2);}
[data-gesto="sello"] .bt-2:hover{transform:translate(3px,3px);box-shadow:0 0 0 0;
  background:var(--ac-bt);color:var(--ac-txt);border-color:var(--ac-bt);}

[data-gesto="sello"] .tj{transition:transform .18s var(--e-suave),
                                    box-shadow .18s var(--e-suave);}
[data-gesto="sello"] .tj:hover{transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 0 color-mix(in srgb,var(--ac) 30%,transparent);}
[data-gesto="sello"] .chip:hover{background:var(--ac-bt);color:var(--ac-txt);
  border-color:var(--ac);}


/* ═══ 8 · HALO ════════════════════════════════════════════════
   Resplandor que crece alrededor, sin tocar la pieza. El gesto
   de lo digital: la luz sale del propio elemento.               */

[data-gesto="halo"] .bt,
[data-gesto="halo"] .bt-2{overflow:visible;
  transition:box-shadow .45s var(--e-salida),color .3s,
             border-color .3s,background .3s;}
[data-gesto="halo"] .bt:hover{
  box-shadow:0 0 0 1px var(--ac),0 0 26px -2px var(--ac),
             0 0 60px -12px var(--ac);}
[data-gesto="halo"] .bt-2:hover{color:var(--ac-tx);border-color:var(--ac);
  background:var(--ac-suave);
  box-shadow:0 0 24px -6px var(--ac);}

[data-gesto="halo"] .tj{transition:box-shadow .45s var(--e-salida),
                                   border-color .45s var(--e-suave),
                                   background .45s var(--e-suave);}
[data-gesto="halo"] .tj:hover{border-color:var(--ac);
  box-shadow:0 0 40px -14px var(--ac);}
[data-gesto="halo"] .chip:hover{color:var(--ac-tx);border-color:var(--ac);
  box-shadow:0 0 18px -6px var(--ac);}


/* ═══ ENLACES DE NAVEGACIÓN ═══════════════════════════════════
   El elemento que más se toca de una web. Cada gesto, el suyo.  */

.b-cab1 nav a,.b-cab2 .lista button{position:relative;}
.b-cab1 nav a::after{content:'';position:absolute;left:0;bottom:-5px;
  width:100%;height:1px;background:currentColor;pointer-events:none;
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--d-corta) var(--e-suave);}
.b-cab1 nav a:hover::after{transform:scaleX(1);transform-origin:left;}

/* rodar: el enlace también rueda */
[data-gesto="rodar"] .b-cab1 nav a::after{display:none;}
[data-gesto="rodar"] .b-cab1 nav a{overflow:hidden;display:inline-block;
  transition:transform .34s var(--e-salida),color .34s;}
[data-gesto="rodar"] .b-cab1 nav a:hover{transform:translateY(-2px);color:var(--ac-tx);}

/* linea: la raya crece desde el centro */
[data-gesto="linea"] .b-cab1 nav a::after{transform-origin:center;transform:scaleX(0);}
[data-gesto="linea"] .b-cab1 nav a:hover::after{transform:scaleX(1);}

/* halo: brilla en vez de subrayarse */
[data-gesto="halo"] .b-cab1 nav a::after{display:none;}
[data-gesto="halo"] .b-cab1 nav a:hover{color:var(--ac-tx);
  text-shadow:0 0 14px color-mix(in srgb,var(--ac) 60%,transparent);}

/* sello: se desplaza en seco */
[data-gesto="sello"] .b-cab1 nav a::after{transition:none;}
[data-gesto="sello"] .b-cab1 nav a:hover{color:var(--ac-tx);}

/* onda: engorda el tracking */
[data-gesto="onda"] .b-cab1 nav a{transition:letter-spacing .35s var(--e-salida),color .3s;}
[data-gesto="onda"] .b-cab1 nav a:hover{letter-spacing:calc(var(--tr-eti) + 1.5px);}


/* ═══ MOVIMIENTO REDUCIDO ═════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  .bt::before,.bt::after,.bt-2::before,.bt-2::after,
  .tj::before,.tj::after{transition:none!important;}
  [data-gesto] .bt:hover,[data-gesto] .bt-2:hover,
  [data-gesto] .tj:hover{transform:none!important;}
  [data-gesto="rodar"] .bt:hover .et > span,
  [data-gesto="rodar"] .bt-2:hover .et > span{transform:none!important;}
}


/* ══════════ piel lujo-claro ══════════ */
/* ═══════════════════════════════════════════════════════════════
   PIEL · Lujo claro
   ───────────────────────────────────────────────────────────────
   Para: Joyería, cosmética, hotel de costa, arquitectura de autor

   La hermana diurna de «lujo». Display en mayúsculas de altísimo
   contraste sobre marfil y arena: travertino, luz de
   mediodía y muchísimo aire. El oro deja de brillar sobre negro y
   pasa a comportarse como tinta: por eso --ac-tx es más oscuro
   que --ac, que aquí solo pinta rellenos, iconos y bordes.

   Contraste verificado con calculadora (no a ojo):
   texto principal 17.1:1 · secundario 7.5:1 · etiquetas 5.5:1 ·
   acento sobre blanco 12.9:1 · blanco sobre botón 12.9:1.
   ═══════════════════════════════════════════════════════════════ */

[data-piel="lujo-claro"]{
  /* superficies · blanco y un gris cálido que apenas se ve */
  --sup-1:#FFFFFF;
  --sup-2:#F5F4F1;
  --sup-3:#FFFFFF;
  --sup-4:#F0EFEB;

  /* texto · negro azulado, nunca negro puro */
  --tx-1:#16181F;
  --tx-2:#545963;
  --tx-3:#646973;

  /* líneas */
  --ln-1:rgba(22,24,31,.11);
  --ln-2:rgba(22,24,31,.20);
  --ln-3:rgba(35,44,102,.38);

  /* acento · azul marino de marca
     Es el azul del monograma, muestreado del propio logotipo. Sobre
     blanco da 12,9:1, así que sirve igual para un titular, para un
     icono o para el fondo de un botón con el texto en blanco: un
     solo color, sin variantes de compromiso. */
  --ac:#2A3574;
  --ac-bt:#232C66;
  --ac-tx:#232C66;
  --ac-txt:#FFFFFF;
  --ac-suave:rgba(42,53,116,.065);
  --ac-2:#646973;

  /* tipografía */
  /* Italiana en versalitas: una display de altísimo contraste que
     solo funciona en mayúsculas, con aire entre letras y en tamaños
     grandes. Es la tipografía de la piel «eventos», y es la que
     convierte un titular en un rótulo de escaparate. */
  --f-tit:'Italiana',Georgia,serif;
  --f-txt:'Jost',Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,Menlo,monospace;
  --pe-tit:400;
  --pe-txt:400;
  --tr-tit:.04em;
  --tr-eti:4.5px;
  --tt-eti:uppercase;
  --tt-tit:uppercase;

  /* forma · sin radios: el corte recto es lo que sostiene la serif */
  --r-min:0px;
  --r-bt:0px;
  --r-cj:0px;
  --r-img:0px;
  --bd:1px;

  /* ritmo y profundidad
     En claro las líneas solas no bastan para separar una tarjeta
     del fondo: aquí la sombra sí trabaja, pero muy abierta y
     apenas visible. */
  --dens:1.4;
  --sh-1:0 1px 2px rgba(22,24,31,.05);
  --sh-2:0 26px 60px -30px rgba(22,24,31,.30);
  --grano:.014;

  color-scheme:light;
}


/* ══════════ bloque 01-cabecera-simple ══════════ */
.b-cab1{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--sup-1) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:var(--bd) solid transparent;
  transition:border-color var(--d-corta) var(--e-suave),background var(--d-corta) var(--e-suave);}
.b-cab1.mini{border-bottom-color:var(--ln-1);}
.b-cab1 .in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--mx);max-width:1480px;margin-inline:auto;
  transition:padding var(--d-corta) var(--e-suave);}
.b-cab1.mini .in{padding-block:13px;}
.b-cab1 .logo{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:21px;
  letter-spacing:var(--tr-tit);}
.b-cab1 .logo i{font-style:normal;color:var(--ac-tx);}
.b-cab1 nav{display:flex;gap:30px;align-items:center;}
.b-cab1 nav a{font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-2);font-weight:500;}
.b-cab1 nav a:hover{color:var(--tx-1);}
.b-cab1 .der{display:flex;align-items:center;gap:18px;}
.b-cab1 .ham{display:none;width:44px;height:44px;align-items:center;justify-content:center;}
.b-cab1 .ham span{display:block;width:20px;height:1.5px;background:var(--tx-1);position:relative;}
.b-cab1 .ham span::before,.b-cab1 .ham span::after{content:'';position:absolute;left:0;
  width:20px;height:1.5px;background:var(--tx-1);transition:transform var(--d-corta) var(--e-suave);}
.b-cab1 .ham span::before{top:-6px;} .b-cab1 .ham span::after{top:6px;}
.b-cab1 .ham[aria-expanded="true"] span{background:transparent;}
.b-cab1 .ham[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.b-cab1 .ham[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}
.b-cab1 .movil{position:fixed;inset:0;background:var(--sup-1);z-index:59;
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--mx);
  opacity:0;visibility:hidden;transition:opacity .35s var(--e-suave),visibility .35s;}
.b-cab1 .movil.abierto{opacity:1;visibility:visible;}
.b-cab1 .movil a{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:clamp(30px,8vw,54px);letter-spacing:var(--tr-tit);padding:9px 0;
  border-bottom:var(--bd) solid var(--ln-1);}
@media(max-width:900px){
  .b-cab1 nav,.b-cab1 .der .bt{display:none;}
  .b-cab1 .ham{display:flex;}
}

/* ══════════ bloque 02-cabecera-mega ══════════ */
.b-cab2{position:relative;z-index:60;border-bottom:var(--bd) solid var(--ln-1);
  background:var(--sup-1);}
.b-cab2 .in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px var(--mx);max-width:1480px;margin-inline:auto;}
.b-cab2 .logo{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:21px;
  letter-spacing:var(--tr-tit);}
.b-cab2 .logo i{font-style:normal;color:var(--ac-tx);}
.b-cab2 .lista{display:flex;gap:4px;}
.b-cab2 .lista button{font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-2);font-weight:500;padding:12px 18px;
  border-radius:var(--r-bt);transition:color var(--d-corta) var(--e-suave),
  background var(--d-corta) var(--e-suave);}
.b-cab2 .lista button:hover,.b-cab2 .lista button[aria-expanded="true"]{
  color:var(--tx-1);background:var(--sup-2);}
.b-cab2 .mega{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--ln-1);border-top:var(--bd) solid var(--ln-1);
  max-height:0;overflow:hidden;transition:max-height .5s var(--e-suave);}
.b-cab2 .mega > div{background:var(--sup-1);padding:38px var(--gap);}
.b-cab2 .mega h2{font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);margin-bottom:18px;font-weight:500;}
.b-cab2 .mega a{display:block;padding:9px 0;font-size:var(--t-txt);color:var(--tx-1);
  border-bottom:var(--bd) solid var(--ln-1);transition:padding-left var(--d-corta) var(--e-suave);}
.b-cab2 .mega a:hover{padding-left:8px;color:var(--ac-tx);}
.b-cab2 .mega a small{display:block;color:var(--tx-3);font-size:var(--t-min);margin-top:2px;}
@media(max-width:900px){.b-cab2 .lista{display:none;} .b-cab2 .mega{display:none;}}

/* ══════════ bloque 05-hero-dividido ══════════ */
.b-h2{display:grid;grid-template-columns:1fr 1fr;min-height:90vh;align-items:stretch;}
.b-h2 .txt-l{display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--sec-y) * 1.1) clamp(28px,4vw,72px);}
.b-h2 h1{font-size:var(--t-xl);max-width:13ch;margin:20px 0 0;}
.b-h2 .txt{margin-top:26px;max-width:38ch;}
.b-h2 .acc{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;}
.b-h2 .img{position:relative;min-height:52vh;}
.b-h2 .ph{position:absolute;inset:0;border:0;border-radius:0;}
.b-h2 .marca-img{position:absolute;left:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,40px);
  background:var(--sup-1);border:var(--bd) solid var(--ln-1);border-radius:var(--r-cj);
  padding:16px 20px;max-width:270px;z-index:2;}
.b-h2 .marca-img b{display:block;font-family:var(--f-tit);font-weight:var(--pe-tit);
  letter-spacing:var(--tr-tit);font-size:var(--t-txt);}
.b-h2 .marca-img span{font-size:var(--t-min);color:var(--tx-3);}
@media(max-width:900px){.b-h2{grid-template-columns:1fr;} .b-h2 .img{min-height:56vh;}}

/* ══════════ bloque 15-logos-marquesina ══════════ */
.b-mq{padding:calc(var(--sec-y) * .6) 0;border-block:var(--bd) solid var(--ln-1);
  overflow:hidden;}
.b-mq .tit{text-align:center;margin-bottom:34px;padding-inline:var(--mx);}
.b-mq .cinta{display:flex;width:max-content;
  animation:b-mq-move var(--mq-t,28s) linear infinite;}
.b-mq:hover .cinta{animation-play-state:paused;}
.b-mq .grupo{display:flex;align-items:center;gap:clamp(40px,6vw,90px);
  padding-right:clamp(40px,6vw,90px);}
.b-mq .lg{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:clamp(19px,2.1vw,28px);letter-spacing:var(--tr-tit);color:var(--tx-3);
  white-space:nowrap;transition:color var(--d-corta) var(--e-suave);}
.b-mq .lg:hover{color:var(--tx-1);}
@keyframes b-mq-move{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.b-mq .cinta{animation:none;}}

/* ══════════ bloque 43-categorias-mosaico ══════════ */
.b-cat{padding:var(--sec-y) var(--mx);}
.b-cat .mos{display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(210px,1fr);gap:var(--gap);margin-top:calc(var(--gap) * 2);}
.b-cat .c{position:relative;overflow:hidden;border-radius:var(--r-img);
  border:var(--bd) solid var(--ln-1);display:flex;align-items:flex-end;
  isolation:isolate;min-height:210px;
  transition:border-color var(--d-corta) var(--e-suave),
             box-shadow var(--d-corta) var(--e-suave);}
.b-cat .c:hover{border-color:var(--ln-3);box-shadow:var(--sh-2);}
/* La foto es el fondo: va detrás de todo, en su propia capa, para
   que el zoom del hover no arrastre al texto. */
.b-cat .c .im{position:absolute;inset:0;z-index:-2;}
.b-cat .c .im img,.b-cat .c .im video,.b-cat .c .im .ph{width:100%;height:100%;
  object-fit:cover;border:0;border-radius:0;
  transition:transform 1.1s var(--e-salida);}
.b-cat .c:hover .im img,.b-cat .c:hover .im video,
.b-cat .c:hover .im .ph{transform:scale(1.05);}
/* Velo desde abajo: sin él, el texto cae sobre una foto cualquiera
   y el contraste depende de la suerte. Con él, no. */
.b-cat .c::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--sup-1) 96%,transparent) 0%,
    color-mix(in srgb,var(--sup-1) 74%,transparent) 38%,
    color-mix(in srgb,var(--sup-1) 22%,transparent) 100%);}
.b-cat .tx{padding:calc(var(--gap) * 1.3);width:100%;}
.b-cat h3{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-md);
  letter-spacing:var(--tr-tit);color:var(--tx-1);}
.b-cat .n{display:flex;align-items:center;gap:10px;margin-top:8px;
  font-size:var(--t-eti);letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);
  color:var(--tx-3);}
.b-cat .n b{color:var(--ac-tx);font-weight:700;}
.b-cat .fl{position:absolute;top:calc(var(--gap) * 1.1);right:calc(var(--gap) * 1.1);
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:var(--bd) solid var(--ln-2);color:var(--tx-1);
  background:color-mix(in srgb,var(--sup-1) 72%,transparent);
  opacity:0;transform:translate(-6px,6px);
  transition:opacity var(--d-corta) var(--e-suave),
             transform var(--d-corta) var(--e-suave),
             background var(--d-corta) var(--e-suave);}
.b-cat .c:hover .fl{opacity:1;transform:none;background:var(--ac-bt);
  color:var(--ac-txt);border-color:var(--ac-bt);}
.b-cat .c.g{grid-column:span 2;grid-row:span 2;}
.b-cat .c.g h3{font-size:var(--t-lg);}
/* Celda a lo ancho: cierra el mosaico y rompe la simetría de la
   rejilla, que es lo que hace que no parezca una hoja de cálculo. */
.b-cat .c.ancha{grid-column:span 4;min-height:230px;}
@media(max-width:900px){
  .b-cat .mos{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(180px,1fr);}
  .b-cat .c.g{grid-column:span 2;grid-row:span 1;min-height:280px;}
  .b-cat .c.ancha{grid-column:span 2;}
}
@media(max-width:560px){
  .b-cat .mos{grid-template-columns:1fr;}
  .b-cat .c.g,.b-cat .c.ancha{grid-column:span 1;}
  /* En táctil no hay hover: la flecha se queda puesta. */
  .b-cat .fl{opacity:1;transform:none;}
}

/* ══════════ bloque 46-banda-editorial ══════════ */
.b-be{background:var(--sup-1);}
.b-be .par{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  min-height:clamp(420px,62vh,760px);}
/* La imagen llega al borde de la pantalla: es lo que separa una
   banda editorial de una tarjeta grande. */
.b-be .im{position:relative;overflow:hidden;background:var(--sup-2);}
.b-be .im img,.b-be .im video,.b-be .im .ph{position:absolute;inset:0;width:100%;
  height:100%;object-fit:cover;border:0;border-radius:0;
  transition:transform 1.4s var(--e-salida);}
.b-be:hover .im img{transform:scale(1.03);}
.b-be .tx{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(38px,6vw,110px);}
.b-be h2{font-size:var(--t-lg);max-width:16ch;margin:16px 0 0;}
.b-be .txt{margin-top:22px;max-width:44ch;}
.b-be .acc{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  margin-top:32px;}
/* Enlace subrayado, no botón: aquí no se compra, se lee. */
.b-be .acc a{font-size:var(--t-min);color:var(--tx-1);
  border-bottom:var(--bd) solid var(--ln-2);padding-bottom:3px;
  transition:color var(--d-corta) var(--e-suave),
             border-color var(--d-corta) var(--e-suave);}
.b-be .acc a:hover{color:var(--ac-tx);border-color:var(--ac);}
/* Invertida: la imagen a la derecha. Dos bandas seguidas con la
   imagen del mismo lado se leen como una sola cosa larga. */
.b-be.inv .im{order:2;}
@media(max-width:860px){
  .b-be .par{grid-template-columns:1fr;}
  .b-be .im{min-height:56vh;order:0!important;}
  .b-be h2{max-width:20ch;}
}

/* ══════════ bloque 36-portfolio-horizontal ══════════ */
.b-ph{background:var(--sup-2);}
.b-ph .marco{padding-inline:var(--mx);}
.b-ph .cabe{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--gap);flex-wrap:wrap;padding-bottom:calc(var(--gap) * 1.6);}
.b-ph .cabe h2{font-size:var(--t-xl);max-width:14ch;margin-top:18px;}
.b-ph .cuenta{font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);font-variant-numeric:tabular-nums;}
.b-ph [data-hz-pista]{gap:var(--gap);padding-inline:var(--mx);}
.b-ph article{flex:0 0 clamp(280px,30vw,430px);display:flex;flex-direction:column;}
.b-ph .img{overflow:hidden;border-radius:var(--r-img);
  border:var(--bd) solid var(--ln-1);}
.b-ph .img .ph{border:0;border-radius:0;transition:transform 1s var(--e-salida);}
.b-ph article:hover .img .ph{transform:scale(1.05);}
.b-ph .pie{display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;padding-top:18px;}
.b-ph h3{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-sm);
  letter-spacing:var(--tr-tit);text-transform:var(--tt-tit);
  transition:color var(--d-corta) var(--e-suave);}
.b-ph article:hover h3{color:var(--ac-tx);}
.b-ph .cat{display:block;font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);margin-top:6px;}
.b-ph .n{font-size:var(--t-eti);color:var(--tx-3);font-variant-numeric:tabular-nums;}
.b-ph .barra{margin:calc(var(--gap) * 1.4) var(--mx) 0;}
/* Versión plana en móvil */
.b-ph.mv-hz-plano [data-hz-pista]{gap:calc(var(--gap) * 1.4);padding-block:0;}
.b-ph.mv-hz-plano .barra{display:none;}

/* ══════════ bloque 40-manifiesto-revelado ══════════ */
.b-mr{padding:calc(var(--sec-y) * 1.5) var(--mx);position:relative;overflow:hidden;}
.b-mr .frase{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:clamp(26px,4.6vw,68px);line-height:1.14;letter-spacing:var(--tr-tit);
  text-transform:var(--tt-tit);max-width:17ch;margin-top:28px;text-wrap:balance;}
.b-mr .frase .mv-w:nth-child(n+1){transition-delay:calc(var(--i) * 55ms);}
.b-mr .apoyo{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);
  margin-top:clamp(48px,8vh,110px);padding-top:30px;
  border-top:var(--bd) solid var(--ln-1);}
.b-mr .apoyo h3{font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--ac-tx);margin-bottom:12px;font-weight:700;}
.b-mr .apoyo p{font-size:var(--t-txt);color:var(--tx-2);max-width:36ch;}
.b-mr .marca{position:absolute;right:calc(var(--mx) * -.2);top:12%;
  font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:clamp(140px,26vw,420px);line-height:.72;letter-spacing:-.06em;
  color:var(--ac-tx);opacity:.045;pointer-events:none;user-select:none;z-index:0;}
.b-mr > *{position:relative;z-index:1;}
@media(max-width:820px){.b-mr .apoyo{grid-template-columns:1fr;gap:28px;}
  .b-mr .marca{display:none;}}

/* ══════════ bloque 41-cifras-grandes ══════════ */
.b-cg{padding:var(--sec-y) var(--mx);}
.b-cg ol{border-top:var(--bd) solid var(--ln-2);margin-top:calc(var(--gap) * 2);}
.b-cg li{display:grid;grid-template-columns:minmax(180px,26%) 1fr auto;
  gap:var(--gap);align-items:center;padding:clamp(26px,4vh,52px) 0;
  border-bottom:var(--bd) solid var(--ln-1);
  transition:padding-left var(--d-corta) var(--e-suave),
             background var(--d-corta) var(--e-suave);}
.b-cg li:hover{padding-left:20px;background:var(--ac-suave);}
.b-cg .v{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:clamp(46px,8vw,116px);line-height:.86;letter-spacing:calc(var(--tr-tit) - .01em);
  color:var(--tx-1);font-variant-numeric:tabular-nums;}
.b-cg li:hover .v{color:var(--ac-tx);}
.b-cg h3{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-sm);
  letter-spacing:var(--tr-tit);text-transform:var(--tt-tit);margin-bottom:8px;}
.b-cg p{font-size:var(--t-txt);color:var(--tx-2);max-width:42ch;}
.b-cg .anio{font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);white-space:nowrap;}
@media(max-width:820px){
  .b-cg li{grid-template-columns:1fr;gap:12px;}
  .b-cg .anio{display:none;}
}

/* ══════════ bloque 39-galeria-parallax ══════════ */
.b-gp{padding:var(--sec-y) var(--mx);overflow:hidden;}
.b-gp .mos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);
  margin-top:calc(var(--gap) * 2);align-items:start;}
.b-gp .col{display:flex;flex-direction:column;gap:var(--gap);}
.b-gp .col:nth-child(2){margin-top:calc(var(--gap) * -2);}
.b-gp figure{overflow:hidden;border-radius:var(--r-img);
  border:var(--bd) solid var(--ln-1);position:relative;}
.b-gp figure .ph{border:0;border-radius:0;
  transition:transform 1.1s var(--e-salida);}
.b-gp figure:hover .ph{transform:scale(1.05);}
.b-gp figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  font-size:var(--t-min);color:var(--tx-1);opacity:0;transform:translateY(8px);
  background:linear-gradient(to top,
    color-mix(in srgb,var(--sup-1) 88%,transparent),transparent);
  transition:opacity var(--d-corta) var(--e-suave),
             transform var(--d-corta) var(--e-suave);}
.b-gp figure:hover figcaption{opacity:1;transform:none;}
@media(max-width:900px){
  .b-gp .mos{grid-template-columns:1fr 1fr;}
  .b-gp .col:nth-child(2){margin-top:0;}
  .b-gp .col:nth-child(3){display:none;}
  .b-gp [data-parallax]{transform:none!important;}
}

/* ══════════ bloque 30-comparativa ══════════ */
.b-cmp{padding:var(--sec-y) var(--mx);}
.b-cmp .caja{overflow-x:auto;margin-top:calc(var(--gap) * 2);
  border:var(--bd) solid var(--ln-1);border-radius:var(--r-cj);}
.b-cmp table{min-width:640px;}
.b-cmp th,.b-cmp td{padding:18px 22px;text-align:left;
  border-bottom:var(--bd) solid var(--ln-1);font-size:var(--t-txt);}
.b-cmp thead th{font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);font-weight:600;
  background:var(--sup-3);white-space:nowrap;}
.b-cmp thead th.dest{color:var(--ac-tx);}
.b-cmp tbody th{font-weight:500;color:var(--tx-1);width:34%;}
.b-cmp td{color:var(--tx-2);}
.b-cmp td.dest{background:var(--ac-suave);color:var(--tx-1);}
.b-cmp tbody tr:last-child th,.b-cmp tbody tr:last-child td{border-bottom:0;}
.b-cmp svg{width:16px;height:16px;stroke-width:1.7;fill:none;vertical-align:-3px;}
.b-cmp .si svg{stroke:var(--ac);} .b-cmp .no svg{stroke:var(--tx-3);}

/* ══════════ bloque 37-servicios-fijos ══════════ */
.b-sf{padding:var(--sec-y) var(--mx);}
.b-sf .par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);
  align-items:start;}
/* Ojo: nada de clip-path en este contenedor. clip-path crea
   bloque contenedor y anula el position:sticky. El revelado
   va en la imagen de dentro. */
.b-sf .fija{position:sticky;top:12vh;}
.b-sf .fija .ph{border-radius:var(--r-img);}
.b-sf .fija .rotulo{display:flex;justify-content:space-between;align-items:center;
  gap:16px;margin-top:20px;padding-top:16px;border-top:var(--bd) solid var(--ln-1);}
.b-sf .fija .rotulo span{font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);}
.b-sf ol{border-top:var(--bd) solid var(--ln-1);}
.b-sf li{padding:calc(var(--gap) * 1.5) 0;border-bottom:var(--bd) solid var(--ln-1);}
.b-sf .fila{display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:baseline;}
.b-sf .n{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-md);
  letter-spacing:var(--tr-tit);color:var(--ac-tx);line-height:1;}
.b-sf h3{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-md);
  letter-spacing:var(--tr-tit);text-transform:var(--tt-tit);margin-bottom:12px;}
.b-sf p{font-size:var(--t-txt);color:var(--tx-2);max-width:44ch;}
.b-sf .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
@media(max-width:900px){
  .b-sf .par{grid-template-columns:1fr;gap:40px;}
  .b-sf .fija{position:static;}
}

/* ══════════ bloque 25-blog-listado ══════════ */
.b-bl{padding:var(--sec-y) var(--mx);}
.b-bl .dest{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,60px);
  align-items:center;padding-bottom:calc(var(--gap) * 2);
  border-bottom:var(--bd) solid var(--ln-1);margin-bottom:calc(var(--gap) * 2);}
.b-bl .dest .ph{border-radius:var(--r-img);}
.b-bl .meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  font-size:var(--t-eti);letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);
  color:var(--tx-3);}
.b-bl .meta .cat{color:var(--ac-tx);}
.b-bl .dest h3{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-lg);
  letter-spacing:var(--tr-tit);line-height:1.08;margin:18px 0 14px;}
.b-bl .rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.b-bl article a{display:block;}
.b-bl article .ph{border-radius:var(--r-img);transition:filter var(--d-corta) var(--e-suave);}
.b-bl article:hover .ph{filter:brightness(1.1);}
.b-bl article h4{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-sm);
  letter-spacing:var(--tr-tit);line-height:1.2;margin:16px 0 10px;
  transition:color var(--d-corta) var(--e-suave);}
.b-bl article:hover h4{color:var(--ac-tx);}
.b-bl article p{font-size:var(--t-min);color:var(--tx-2);}
@media(max-width:900px){
  .b-bl .dest{grid-template-columns:1fr;} .b-bl .rejilla{grid-template-columns:1fr;}
}

/* ══════════ bloque 21-faq ══════════ */
.b-faq{padding:var(--sec-y) var(--mx);}
.b-faq .par{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(34px,6vw,80px);
  align-items:start;}
.b-faq h2{font-size:var(--t-lg);max-width:11ch;margin-top:18px;}
.b-faq .lista{border-top:var(--bd) solid var(--ln-1);}
.b-faq .item{border-bottom:var(--bd) solid var(--ln-1);}
.b-faq button{width:100%;display:grid;grid-template-columns:1fr 22px;gap:20px;
  align-items:center;text-align:left;padding:24px 0;
  font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-sm);
  letter-spacing:var(--tr-tit);color:var(--tx-1);
  transition:color var(--d-corta) var(--e-suave),padding-left var(--d-corta) var(--e-suave);}
.b-faq button:hover{color:var(--ac-tx);padding-left:8px;}
.b-faq .sig{position:relative;width:16px;height:16px;justify-self:end;}
.b-faq .sig::before,.b-faq .sig::after{content:'';position:absolute;background:currentColor;
  transition:transform var(--d-corta) var(--e-suave),opacity var(--d-corta) var(--e-suave);}
.b-faq .sig::before{left:0;top:7.5px;width:16px;height:1.5px;}
.b-faq .sig::after{left:7.5px;top:0;width:1.5px;height:16px;}
.b-faq button[aria-expanded="true"] .sig::after{transform:rotate(90deg);opacity:0;}
.b-faq button[aria-expanded="true"]{color:var(--ac-tx);}
.b-faq .panel{max-height:0;overflow:hidden;transition:max-height .5s var(--e-suave);}
.b-faq .panel p{padding:0 40px 26px 0;font-size:var(--t-txt);color:var(--tx-2);max-width:62ch;}
@media(max-width:860px){.b-faq .par{grid-template-columns:1fr;}}

/* ══════════ bloque 42-cta-magnetica ══════════ */
.b-cm{min-height:82svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:var(--sec-y) var(--mx);
  position:relative;overflow:hidden;isolation:isolate;}
.b-cm h2{font-size:var(--t-xl);max-width:15ch;margin:26px auto 0;}
.b-cm .txt{margin:28px auto 0;max-width:44ch;}
.b-cm .acc{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  margin-top:42px;}
.b-cm .bt{padding:20px 38px;font-size:var(--t-min);letter-spacing:2.4px;}
.b-cm .pie{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;
  margin-top:44px;padding-top:24px;border-top:var(--bd) solid var(--ln-1);
  width:min(560px,100%);}
.b-cm .pie span{display:flex;align-items:center;gap:9px;font-size:var(--t-min);
  color:var(--tx-3);}
.b-cm .pie svg{width:14px;height:14px;stroke:var(--ac);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}

/* ══════════ bloque 03-pie-completo ══════════ */
.b-pie{border-top:var(--bd) solid var(--ln-1);padding:calc(var(--sec-y) * .8) var(--mx)
  calc(var(--sec-y) * .35);}
.b-pie .cont{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--gap);}
.b-pie h2{font-size:var(--t-eti);letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);
  color:var(--tx-3);margin-bottom:20px;font-weight:500;}
.b-pie a{display:block;padding:7px 0;color:var(--tx-2);font-size:var(--t-txt);
  transition:color var(--d-corta) var(--e-suave);}
.b-pie a:hover{color:var(--ac-tx);}
.b-pie .marca{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:clamp(26px,3vw,40px);letter-spacing:var(--tr-tit);margin-bottom:16px;}
.b-pie .marca i{font-style:normal;color:var(--ac-tx);}
.b-pie .baja{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:calc(var(--gap) * 2.6);padding-top:24px;border-top:var(--bd) solid var(--ln-1);}
.b-pie .baja p,.b-pie .baja a{font-size:var(--t-min);color:var(--tx-3);display:inline;}
.b-pie .legal{display:flex;gap:22px;flex-wrap:wrap;}
@media(max-width:900px){.b-pie .cont{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.b-pie .cont{grid-template-columns:1fr;}}

/* ══════════ bloque 26-blog-articulo ══════════ */
.b-art{padding:var(--sec-y) var(--mx);}
.b-art .cabecera{max-width:760px;margin-inline:auto;text-align:center;
  padding-bottom:calc(var(--gap) * 2);border-bottom:var(--bd) solid var(--ln-1);}
.b-art .meta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  font-size:var(--t-eti);letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);
  color:var(--tx-3);}
.b-art .meta .cat{color:var(--ac-tx);}
.b-art h1{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-lg);
  letter-spacing:var(--tr-tit);line-height:1.08;margin:20px 0 18px;text-wrap:balance;}
.b-art .autor{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:26px;}
.b-art .autor .ph{width:38px;height:38px;border-radius:50%;flex:none;}
.b-art .autor b{font-size:var(--t-min);} .b-art .autor span{font-size:var(--t-min);color:var(--tx-3);}
.b-art .cuerpo{max-width:68ch;margin:calc(var(--gap) * 2.2) auto 0;}
.b-art .cuerpo > *{margin-bottom:22px;}
.b-art .cuerpo p{font-size:calc(var(--t-txt) * 1.08);line-height:1.75;color:var(--tx-2);max-width:none;}
.b-art .cuerpo p.entradilla{font-size:var(--t-sm);color:var(--tx-1);line-height:1.5;}
.b-art .cuerpo h2{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-md);
  letter-spacing:var(--tr-tit);margin-top:52px;}
.b-art .cuerpo ul{margin-left:2px;}
.b-art .cuerpo li{display:grid;grid-template-columns:16px 1fr;gap:14px;padding:7px 0;
  color:var(--tx-2);line-height:1.65;}
.b-art .cuerpo li::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--ac);margin-top:11px;}
.b-art blockquote{border-left:2px solid var(--ac);padding:6px 0 6px 26px;margin:40px 0;
  font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-sm);
  letter-spacing:var(--tr-tit);line-height:1.4;color:var(--tx-1);}
.b-art figure{margin:44px 0;}
.b-art figure .ph{border-radius:var(--r-img);}
.b-art figcaption{font-size:var(--t-min);color:var(--tx-3);margin-top:12px;text-align:center;}
.b-art .fin{max-width:68ch;margin:calc(var(--gap) * 2.4) auto 0;padding-top:26px;
  border-top:var(--bd) solid var(--ln-1);display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;align-items:center;}
.b-art .fin span{font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);}

/* ══════════ bloque 25-blog-listado ══════════ */
.b-bl{padding:var(--sec-y) var(--mx);}
.b-bl .dest{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,60px);
  align-items:center;padding-bottom:calc(var(--gap) * 2);
  border-bottom:var(--bd) solid var(--ln-1);margin-bottom:calc(var(--gap) * 2);}
.b-bl .dest .ph{border-radius:var(--r-img);}
.b-bl .meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  font-size:var(--t-eti);letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);
  color:var(--tx-3);}
.b-bl .meta .cat{color:var(--ac-tx);}
.b-bl .dest h3{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-lg);
  letter-spacing:var(--tr-tit);line-height:1.08;margin:18px 0 14px;}
.b-bl .rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.b-bl article a{display:block;}
.b-bl article .ph{border-radius:var(--r-img);transition:filter var(--d-corta) var(--e-suave);}
.b-bl article:hover .ph{filter:brightness(1.1);}
.b-bl article h4{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-sm);
  letter-spacing:var(--tr-tit);line-height:1.2;margin:16px 0 10px;
  transition:color var(--d-corta) var(--e-suave);}
.b-bl article:hover h4{color:var(--ac-tx);}
.b-bl article p{font-size:var(--t-min);color:var(--tx-2);}
@media(max-width:900px){
  .b-bl .dest{grid-template-columns:1fr;} .b-bl .rejilla{grid-template-columns:1fr;}
}

/* ══════════ bloque 23-galeria ══════════ */
.b-gal{padding:var(--sec-y) var(--mx);}
.b-gal .mos{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);
  margin-top:calc(var(--gap) * 2);}
.b-gal .it{overflow:hidden;border-radius:var(--r-img);position:relative;cursor:pointer;}
.b-gal .it .ph{border:0;border-radius:0;height:100%;transition:transform .7s var(--e-suave);}
.b-gal .it:hover .ph{transform:scale(1.04);}
.b-gal .it figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  font-size:var(--t-min);color:var(--tx-1);opacity:0;
  background:linear-gradient(to top,color-mix(in srgb,var(--sup-1) 88%,transparent),transparent);
  transition:opacity var(--d-corta) var(--e-suave);}
.b-gal .it:hover figcaption{opacity:1;}
.b-gal .a{grid-column:span 4;} .b-gal .a .ph{aspect-ratio:16/10;}
.b-gal .b{grid-column:span 2;} .b-gal .b .ph{aspect-ratio:4/5;}
.b-gal .c{grid-column:span 2;} .b-gal .c .ph{aspect-ratio:1/1;}
.b-gal .d{grid-column:span 2;} .b-gal .d .ph{aspect-ratio:1/1;}
.b-gal .e{grid-column:span 2;} .b-gal .e .ph{aspect-ratio:1/1;}
@media(max-width:800px){
  .b-gal .mos{grid-template-columns:repeat(2,1fr);}
  .b-gal .a,.b-gal .b,.b-gal .c,.b-gal .d,.b-gal .e{grid-column:span 1;}
  .b-gal .a .ph,.b-gal .b .ph{aspect-ratio:1/1;}
}

/* ══════════ bloque 19-formulario ══════════ */
.b-frm{padding:var(--sec-y) var(--mx);}
.b-frm .par{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,88px);}
.b-frm h2{font-size:var(--t-lg);max-width:13ch;margin-top:18px;}
.b-frm .datos{margin-top:36px;padding-top:26px;border-top:var(--bd) solid var(--ln-1);}
.b-frm .datos div{padding:11px 0;}
.b-frm .datos span{display:block;font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);margin-bottom:3px;}
.b-frm .datos a,.b-frm .datos p{font-size:var(--t-txt);color:var(--tx-1);}
.b-frm form{display:grid;gap:26px;}
.b-frm .dos{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.b-frm .priv{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-min);
  color:var(--tx-3);}
.b-frm .priv input{width:17px;height:17px;margin-top:2px;accent-color:var(--ac);flex:none;}
.b-frm .priv a{color:var(--ac-tx);text-decoration:underline;}
@media(max-width:900px){
  .b-frm .par{grid-template-columns:1fr;} .b-frm .dos{grid-template-columns:1fr;}
}

/* ══════════ bloque 20-contacto-datos ══════════ */
.b-loc{padding:var(--sec-y) var(--mx);}
.b-loc .par{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--gap);
  margin-top:calc(var(--gap) * 2);align-items:stretch;}
.b-loc .info{background:var(--sup-3);border:var(--bd) solid var(--ln-1);
  border-radius:var(--r-cj);padding:calc(var(--gap) * 1.7);box-shadow:var(--sh-1);}
.b-loc h3{font-size:var(--t-eti);letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);
  color:var(--tx-3);margin-bottom:18px;font-weight:600;}
.b-loc .dir{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-md);
  letter-spacing:var(--tr-tit);line-height:1.25;}
.b-loc .hor{margin-top:32px;padding-top:24px;border-top:var(--bd) solid var(--ln-1);}
.b-loc .hor li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  font-size:var(--t-txt);color:var(--tx-2);border-bottom:var(--bd) solid var(--ln-1);}
.b-loc .hor li:last-child{border-bottom:0;}
.b-loc .hor li b{color:var(--tx-1);font-weight:500;}
.b-loc .hor li.cerrado b{color:var(--tx-3);}
.b-loc .acc{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}
.b-loc .mapa{border-radius:var(--r-img);overflow:hidden;min-height:340px;position:relative;}
.b-loc .mapa .ph{position:absolute;inset:0;border-radius:0;}
.b-loc .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;background:var(--ac);
  box-shadow:0 0 0 8px var(--ac-suave);z-index:2;}
@media(max-width:900px){.b-loc .par{grid-template-columns:1fr;}}

/* ══════════ bloque 34-pagina-legal ══════════ */
.b-lg{padding:var(--sec-y) var(--mx);}
.b-lg .par{display:grid;grid-template-columns:240px 1fr;gap:clamp(30px,5vw,70px);
  align-items:start;}
.b-lg .indice{position:sticky;top:24px;}
.b-lg .indice h3{font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);margin-bottom:14px;font-weight:600;}
.b-lg .indice a{display:block;padding:9px 0;font-size:var(--t-min);color:var(--tx-2);
  border-bottom:var(--bd) solid var(--ln-1);transition:color var(--d-corta) var(--e-suave),
  padding-left var(--d-corta) var(--e-suave);}
.b-lg .indice a:hover{color:var(--ac-tx);padding-left:7px;}
.b-lg .texto{max-width:70ch;}
.b-lg .texto h1{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-md);
  letter-spacing:var(--tr-tit);margin-bottom:10px;}
.b-lg .fecha{font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);padding-bottom:26px;
  border-bottom:var(--bd) solid var(--ln-1);display:block;}
.b-lg .texto h2{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-sm);
  letter-spacing:var(--tr-tit);margin:42px 0 14px;scroll-margin-top:24px;}
.b-lg .texto p{font-size:var(--t-txt);color:var(--tx-2);line-height:1.75;margin-bottom:15px;
  max-width:none;}
.b-lg .texto li{display:grid;grid-template-columns:16px 1fr;gap:13px;padding:6px 0;
  color:var(--tx-2);line-height:1.7;font-size:var(--t-txt);}
.b-lg .texto li::before{content:'';width:4px;height:4px;border-radius:50%;
  background:var(--ac);margin-top:12px;}
.b-lg .aviso{border:var(--bd) solid var(--ln-2);border-left:2px solid var(--ac);
  border-radius:var(--r-cj);padding:20px 22px;margin:30px 0;background:var(--ac-suave);}
.b-lg .aviso p{margin:0;font-size:var(--t-min);}
@media(max-width:900px){
  .b-lg .par{grid-template-columns:1fr;} .b-lg .indice{position:static;}
}

/* ══════════ bloque 33-error-404 ══════════ */
.b-404{min-height:78vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:var(--sec-y) var(--mx);}
.b-404 .cifra{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:clamp(80px,17vw,220px);line-height:.82;letter-spacing:var(--tr-tit);
  color:var(--ac-tx);opacity:.16;}
.b-404 h1{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-lg);
  letter-spacing:var(--tr-tit);margin:-14px 0 18px;max-width:16ch;}
.b-404 .acc{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:34px;}
.b-404 .sug{margin-top:calc(var(--gap) * 2.4);padding-top:26px;
  border-top:var(--bd) solid var(--ln-1);width:100%;max-width:560px;}
.b-404 .sug h2{font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);margin-bottom:14px;}
.b-404 .sug a{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 0;border-bottom:var(--bd) solid var(--ln-1);font-size:var(--t-txt);
  text-align:left;transition:padding-left var(--d-corta) var(--e-suave);}
.b-404 .sug a:hover{padding-left:10px;color:var(--ac-tx);}
.b-404 .sug a span{color:var(--tx-3);}

/* ══════════ bloque 24-cookies ══════════ */
.b-ck{position:fixed;left:var(--mx);right:var(--mx);bottom:20px;z-index:200;
  max-width:660px;background:var(--sup-3);border:var(--bd) solid var(--ln-2);
  border-radius:var(--r-cj);padding:24px 26px;
  box-shadow:0 24px 60px -20px color-mix(in srgb,var(--tx-1) 34%,transparent);
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;}
.b-ck h2{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-txt);
  letter-spacing:var(--tr-tit);margin-bottom:7px;}
.b-ck p{font-size:var(--t-min);color:var(--tx-2);max-width:52ch;}
.b-ck p a{color:var(--ac-tx);text-decoration:underline;}
.b-ck .acc{display:flex;gap:10px;flex-wrap:wrap;}
.b-ck .bt,.b-ck .bt-2{padding:11px 18px;font-size:9.5px;}
@media(max-width:720px){
  .b-ck{grid-template-columns:1fr;left:12px;right:12px;bottom:12px;}
  .b-ck .acc .bt,.b-ck .acc .bt-2{flex:1;justify-content:center;}
}

/* ══════════ bloque 31-migas ══════════ */
.b-mg{padding:20px var(--mx);border-bottom:var(--bd) solid var(--ln-1);}
.b-mg ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:var(--t-eti);letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);}
.b-mg li{display:flex;align-items:center;gap:10px;color:var(--tx-3);}
.b-mg a{color:var(--tx-2);transition:color var(--d-corta) var(--e-suave);}
.b-mg a:hover{color:var(--ac-tx);}
.b-mg li[aria-current]{color:var(--tx-1);}
.b-mg .sep{opacity:.5;}

/* ══════════ bloque 44-tienda-rejilla ══════════ */
.b-tr{padding:var(--sec-y) var(--mx);}
.b-tr .filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding-bottom:calc(var(--gap) * 1.1);border-bottom:var(--bd) solid var(--ln-1);
  margin-bottom:calc(var(--gap) * 1.6);}
.b-tr .filtros .cuenta{margin-left:auto;font-size:var(--t-eti);
  letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);color:var(--tx-3);}
.b-tr .rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);}
.b-tr .p{background:var(--sup-3);border:var(--bd) solid var(--ln-1);
  border-radius:var(--r-cj);box-shadow:var(--sh-1);display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:border-color var(--d-corta) var(--e-suave),
             box-shadow var(--d-corta) var(--e-suave),
             transform var(--d-corta) var(--e-suave);}
.b-tr .p:hover{border-color:var(--ln-3);box-shadow:var(--sh-2);transform:translateY(-3px);}
.b-tr .p .foto{display:block;position:relative;overflow:hidden;background:var(--sup-2);}
.b-tr .p .foto img,.b-tr .p .foto .ph{aspect-ratio:1/1;width:100%;object-fit:cover;
  border:0;border-radius:0;transition:transform 1s var(--e-salida);}
.b-tr .p:hover .foto img,.b-tr .p:hover .foto .ph{transform:scale(1.045);}
/* Un velo cálido mínimo sobre la foto: las fotografías de catálogo
   vienen de sesiones distintas y con fondos distintos. Esto no las
   iguala, pero las emparenta. */
.b-tr .p .foto::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--ac-suave);mix-blend-mode:multiply;opacity:.55;}
.b-tr .p .dist{position:absolute;top:12px;left:12px;z-index:2;
  background:var(--ac-bt);color:var(--ac-txt);}
.b-tr .p .dat{padding:calc(var(--gap) * 1.1);display:flex;flex-direction:column;
  gap:7px;flex:1;}
.b-tr .p .fam{font-size:var(--t-eti);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);}
.b-tr .p h3{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-sm);
  letter-spacing:var(--tr-tit);line-height:1.2;}
.b-tr .p h3 a{display:block;}
.b-tr .p h3 a:hover{color:var(--ac-tx);}
.b-tr .p .pr{display:flex;align-items:baseline;gap:10px;margin-top:auto;padding-top:12px;
  font-variant-numeric:tabular-nums;}
.b-tr .p .pr b{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-md);
  letter-spacing:var(--tr-tit);color:var(--tx-1);line-height:1;}
.b-tr .p .pr s{font-size:var(--t-min);color:var(--tx-3);}
.b-tr .p .acc{padding:0 calc(var(--gap) * 1.1) calc(var(--gap) * 1.1);}
.b-tr .p .acc .bt-2{width:100%;padding-block:14px;}
.b-tr .vacio{padding:calc(var(--gap) * 3) 0;text-align:center;color:var(--tx-2);}
@media(max-width:1100px){.b-tr .rejilla{grid-template-columns:repeat(3,1fr);}}
@media(max-width:820px){.b-tr .rejilla{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){
  .b-tr .rejilla{grid-template-columns:1fr;}
  .b-tr .filtros .cuenta{margin-left:0;width:100%;}
}

/* ══════════ bloque 45-ficha-producto ══════════ */
.b-fpr{padding:calc(var(--sec-y) * .7) var(--mx) var(--sec-y);}
.b-fpr .par{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,80px);align-items:start;}
/* La foto se queda quieta mientras se lee la ficha: en móvil no,
   ahí molesta más de lo que ayuda. */
.b-fpr .media{position:sticky;top:96px;}
.b-fpr .grande{position:relative;overflow:hidden;border:var(--bd) solid var(--ln-1);
  border-radius:var(--r-img);background:var(--sup-2);}
.b-fpr .grande img,.b-fpr .grande .ph{width:100%;aspect-ratio:1/1;object-fit:cover;
  border:0;border-radius:0;transition:transform 1.2s var(--e-salida);}
.b-fpr .grande:hover img{transform:scale(1.06);}
.b-fpr .grande .dist{position:absolute;top:16px;left:16px;
  background:var(--ac-bt);color:var(--ac-txt);}
.b-fpr .apoyo{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;}
.b-fpr .info > .eti{margin-bottom:14px;}
.b-fpr h1{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-lg);
  letter-spacing:var(--tr-tit);line-height:1.06;text-wrap:balance;}
.b-fpr .pr{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-top:22px;font-variant-numeric:tabular-nums;}
.b-fpr .pr b{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:var(--tr-tit);}
.b-fpr .pr s{color:var(--tx-3);font-size:var(--t-sm);}
.b-fpr .entradilla{margin-top:20px;}
.b-fpr .compra{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;
  margin:calc(var(--gap) * 1.5) 0;}
.b-fpr .qty{display:flex;align-items:center;border:var(--bd) solid var(--ln-2);
  border-radius:var(--r-bt);}
.b-fpr .qty button{width:46px;height:52px;color:var(--tx-2);font-size:17px;
  transition:color var(--d-micro) var(--e-suave),background var(--d-micro) var(--e-suave);}
.b-fpr .qty button:hover{color:var(--ac-tx);background:var(--ac-suave);}
.b-fpr .qty input{width:44px;height:52px;text-align:center;background:none;border:0;
  font-variant-numeric:tabular-nums;color:var(--tx-1);}
.b-fpr .compra .bt{flex:1;min-height:52px;}
.b-fpr .garantias{display:flex;gap:20px;flex-wrap:wrap;padding:18px 0;
  border-block:var(--bd) solid var(--ln-1);}
.b-fpr .garantias span{display:flex;align-items:center;gap:9px;font-size:var(--t-min);
  color:var(--tx-2);}
.b-fpr .garantias svg{width:15px;height:15px;stroke:var(--ac);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none;}
.b-fpr .datos{margin-top:calc(var(--gap) * 1.4);}
/* Acordeón: mismo comportamiento que el bloque de preguntas
   frecuentes, con el peso visual bajado — aquí es letra pequeña,
   no una sección. */
.b-fpr .plegable{margin-top:calc(var(--gap) * 1.4);
  border-top:var(--bd) solid var(--ln-1);}
.b-fpr .item{border-bottom:var(--bd) solid var(--ln-1);}
.b-fpr .item > button{width:100%;display:grid;grid-template-columns:1fr 16px;gap:18px;
  align-items:center;text-align:left;padding:18px 0;color:var(--tx-1);
  font-size:var(--t-eti);letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);
  font-weight:600;transition:color var(--d-corta) var(--e-suave);}
.b-fpr .item > button:hover,.b-fpr .item > button[aria-expanded="true"]{color:var(--ac-tx);}
.b-fpr .sig{position:relative;width:13px;height:13px;justify-self:end;}
.b-fpr .sig::before,.b-fpr .sig::after{content:'';position:absolute;background:currentColor;
  transition:transform var(--d-corta) var(--e-suave),opacity var(--d-corta) var(--e-suave);}
.b-fpr .sig::before{left:0;top:6px;width:13px;height:1.5px;}
.b-fpr .sig::after{left:6px;top:0;width:1.5px;height:13px;}
.b-fpr .item > button[aria-expanded="true"] .sig::after{transform:rotate(90deg);opacity:0;}
.b-fpr .panel{max-height:0;overflow:hidden;transition:max-height .5s var(--e-suave);}
.b-fpr .panel p{padding:0 0 22px;font-size:var(--t-txt);color:var(--tx-2);max-width:56ch;}
@media(max-width:900px){
  .b-fpr .par{grid-template-columns:1fr;}
  .b-fpr .media{position:static;}
}

/* ══════════ ajustes del cliente ══════════ */

/* ═══ AJUSTES DE ANGELO LUCHINI ═══════════════════════════════
   La pieza a medida de esta web. Todo lo demás viene de la
   librería sin tocar.                                          */

/* ─── Portada partida: texto | vídeo ──────────────────────── */
/* El fondo de la mitad izquierda NO es el marfil de la piel: es el
   color exacto de la pared sobre la que está rodado el vídeo,
   medido fotograma a fotograma en el borde por el que se unen
   (#E5D5C9, y se mantiene igual durante todo el clip). Así no hay
   costura que disimular: la página y el vídeo son el mismo plano.
   Sobre esta arena, --tx-3 se queda en 4,25:1, por debajo de AA:
   por eso la etiqueta de la portada sube a --tx-2 (5,45:1). */
:root{--portada:#E5D5C9;}
.b-h2{min-height:100svh;background:var(--portada);}
/* El texto de la portada arranca EXACTAMENTE donde arranca el
   contenido del resto de la web. El contenedor ancho mide 1840 px
   y va centrado, así que su margen izquierdo es (página−1840)/2.
   Como esta columna es la mitad de la sección, eso es 100%−920px
   (920 = 1840/2). Con max() nunca baja del margen lateral. */
.b-h2 .txt-l{padding-left:max(var(--mx),calc(100% - 920px));
  padding-right:clamp(20px,2vw,40px);}
@media(max-width:900px){.b-h2 .txt-l{padding-inline:var(--mx);}}
/* El titular, todo lo grande que puede ser sin partirse en tres
   líneas: la medida la manda «PEQUEÑAS JOYAS», que es la línea
   larga. Comprobado de 1280 a 2560 px. */
.b-h2 h1{max-width:none;font-size:clamp(38px,4.9vw,96px);}
/* Sin medida en «ch»: el ancho lo pone la columna. Con una tipografía
   de reserva más ancha que Italiana, cualquier medida en caracteres
   se pasa de líneas justo donde no debe. */
.b-h2 .eti{color:var(--tx-2);}
.b-h2 .txt{max-width:54ch;}
.b-h2 .img{overflow:hidden;background:var(--portada);}
.b-h2 .img video,.b-h2 .img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:66% 22%;
  /* El plano, un punto más cerca. Solo un 4 %: cada punto de zoom
     es un punto de nitidez que se pierde, y en una pantalla de doble
     densidad el vídeo ya se está ampliando de por sí. */
  transform:scale(1.04);transform-origin:64% 42%;}
/* El vídeo dura ocho segundos; el fotograma final se queda ahí para
   siempre. Y un vídeo de 1080 px de alto, en una pantalla de doble
   densidad, se ve blando. Así que al terminar entra encima una foto
   del último fotograma a 2164 px, ampliada con lanczos y enfocada:
   lo que se mira el 95 % del tiempo pasa a estar nítido.
   El póster, en cambio, es el PRIMER fotograma: arrancar no da salto. */
.b-h2 .quieto{opacity:0;transition:opacity .5s var(--e-suave);}
.b-h2 .img.acabado .quieto{opacity:1;}
@media(max-width:700px){
  .b-h2 video{display:none;}
  .b-h2 .quieto{opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .b-h2 video{display:none;}
  .b-h2 .quieto{opacity:1;}
}
.b-h2 .fundido{position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Fundido CORTO. Uno largo pinta un lavado plano encima de una
     pared que no es plana —el vídeo tiene su propia caída de luz—
     y eso es lo que se leía como un degradado raro. Con 16 basta
     para que no haya canto, y el resto es vídeo puro. */
  background:linear-gradient(90deg,
    var(--portada) 0%,
    color-mix(in srgb,var(--portada) 55%,transparent) 5%,
    transparent 16%);}
/* La cabecera va blanca SIEMPRE, también sobre la portada de arena.
   Antes tomaba el color del fondo para no cortar la portada; el
   corte, con el filete fino, resulta que ordena más que molesta. */
.b-cab1{background:var(--sup-1);}
.b-cab1:not(.mini){border-bottom-color:var(--ln-1);}
@media(max-width:900px){
  /* Apilado. Hay que repetir la retícula: la regla de una sola
     columna vive en el bloque, que va antes que estos ajustes. */
  .b-h2{grid-template-columns:1fr;min-height:0;}
  .b-h2 .img{min-height:64svh;}
  .b-h2 .fundido{background:linear-gradient(180deg,
    var(--portada) 0%,
    color-mix(in srgb,var(--portada) 55%,transparent) 4%,
    transparent 14%);}
}

/* ─── El monograma ─────────────────────────────────────────── */
/* Va como máscara, no como imagen: así toma el color del texto que
   tenga al lado y sirve en azul, en blanco o en negro con un solo
   archivo. Vectorizado del logotipo original, no rasterizado. */
.mono{display:block;flex:none;background:currentColor;
  /* El SVG va incrustado en el propio CSS. Con un archivo aparte,
     Chrome bloquea la máscara al abrir la web con doble clic
     (file://) y el logotipo desaparece justo en la previsualización,
     que es donde hay que verlo. Incrustado funciona siempre. */
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201352%20776%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cg%20transform%3D%22translate%280.000000%2C776.000000%29%20scale%280.100000%2C-0.100000%29%22%20fill%3D%22%23000000%22%20stroke%3D%22none%22%3E%20%3Cpath%20d%3D%22M3553%207729%20c-37%20-21%20-75%20-32%20-135%20-40%20-45%20-5%20-153%20-26%20-238%20-45%20-85%20-20%20-186%20-42%20-224%20-50%20-39%20-8%20-85%20-23%20-104%20-35%20-19%20-11%20-66%20-26%20-104%20-34%20-38%20-8%20-88%20-26%20-111%20-39%20-23%20-13%20-62%20-30%20-87%20-36%20-25%20-7%20-63%20-22%20-85%20-35%20-22%20-12%20-65%20-31%20-95%20-40%20-30%20-10%20-111%20-45%20-180%20-78%20-69%20-32%20-152%20-72%20-185%20-88%20-157%20-75%20-510%20-307%20-700%20-460%20-99%20-80%20-340%20-309%20-427%20-405%20-141%20-156%20-176%20-201%20-263%20-334%20-48%20-74%20-98%20-146%20-111%20-160%20-13%20-14%20-30%20-45%20-39%20-70%20-9%20-24%20-28%20-65%20-44%20-90%20-42%20-67%20-120%20-242%20-187%20-418%20-13%20-34%20-32%20-79%20-43%20-100%20-10%20-20%20-31%20-98%20-46%20-172%20-14%20-74%20-35%20-174%20-46%20-221%20-10%20-48%20-24%20-151%20-29%20-230%20-5%20-79%20-17%20-184%20-25%20-234%20-20%20-122%20-19%20-244%205%20-470%2011%20-104%2020%20-216%2020%20-249%200%20-117%2088%20-583%20126%20-661%2013%20-29%2027%20-67%2030%20-86%204%20-19%2017%20-54%2030%20-79%2013%20-25%2039%20-90%2059%20-145%2020%20-55%2048%20-120%2064%20-145%2035%20-55%2059%20-102%20105%20-200%2019%20-41%2054%20-100%2078%20-130%2023%20-30%2074%20-101%20112%20-157%20128%20-183%20459%20-516%20630%20-633%2047%20-32%20113%20-79%20145%20-104%2033%20-24%2075%20-52%2093%20-62%2018%20-9%2054%20-32%2081%20-50%2077%20-53%20575%20-294%20607%20-294%208%200%2038%20-11%2067%20-24%2028%20-13%2077%20-30%20110%20-36%2032%20-7%2075%20-21%2097%20-32%2021%20-11%2068%20-26%20105%20-34%20164%20-37%20281%20-65%20346%20-83%2039%20-11%2097%20-20%20130%20-20%2034%20-1%20103%20-12%20155%20-25%20155%20-40%20299%20-49%20750%20-49%20436%200%20633%2013%20718%2049%2020%208%2084%2019%20142%2024%2058%205%20130%2018%20160%2028%2030%2010%2078%2022%20105%2026%2028%204%2077%2016%20110%2026%2033%2010%2087%2024%20120%2030%2033%207%2070%2018%2082%2026%2013%208%2053%2021%2090%2030%2037%208%2083%2022%20102%2031%2020%208%2061%2023%2091%2033%2030%2010%2093%2035%20140%2055%2047%2020%20119%2050%20160%2067%2041%2016%20116%2050%20165%2075%2050%2025%20113%2054%20140%2065%2028%2011%2064%2030%2082%2044%2017%2013%2036%2024%2041%2024%205%200%2040%2020%2078%2045%2038%2024%2072%2045%2075%2045%2013%200%20188%20105%20287%20171%2057%2038%20108%2069%20112%2069%204%200%2027%2016%2050%2035%2023%2019%2046%2035%2050%2035%205%200%2035%2022%2067%2048%2032%2027%20108%2084%20168%20127%2061%2043%20151%20113%20200%20155%2050%2042%20101%2084%20115%2093%2030%2021%20146%20125%20209%20188%20141%20142%20483%20442%20622%20547%20181%20135%20172%20128%20377%20272%20222%20154%20484%20314%20582%20354%2030%2013%2073%2035%2094%2049%2021%2015%2044%2027%2051%2027%207%200%2036%2013%2066%2029%2030%2015%2072%2034%2094%2041%2022%207%2056%2021%2075%2031%20161%2087%20490%20114%20710%2060%2047%20-11%20112%20-27%20145%20-35%2090%20-22%20217%20-68%20250%20-92%2017%20-11%2049%20-28%2071%20-37%20249%20-97%20553%20-397%20658%20-648%2049%20-117%2096%20-348%2096%20-468%200%20-236%20-114%20-562%20-265%20-756%20-17%20-22%20-42%20-58%20-56%20-80%20-60%20-92%20-280%20-305%20-380%20-368%20-24%20-15%20-71%20-45%20-104%20-67%20-103%20-68%20-216%20-122%20-325%20-156%20-58%20-18%20-123%20-39%20-145%20-47%20-113%20-42%20-607%20-36%20-709%208%20-22%209%20-67%2021%20-100%2026%20-34%206%20-86%2022%20-116%2036%20-30%2014%20-84%2035%20-120%2048%20-36%2012%20-87%2036%20-114%2054%20-28%2017%20-55%2031%20-62%2031%20-7%200%20-25%2011%20-41%2024%20-15%2013%20-53%2036%20-83%2051%20-30%2015%20-68%2039%20-85%2052%20-16%2013%20-61%2047%20-100%2074%20-38%2028%20-132%20111%20-208%20185%20-159%20156%20-166%20158%20-244%2094%20-26%20-22%20-95%20-76%20-153%20-121%20-182%20-142%20-181%20-131%20-17%20-320%2067%20-78%20131%20-153%20142%20-168%2043%20-58%20214%20-215%20350%20-321%2032%20-25%2074%20-59%2094%20-76%2020%20-17%2055%20-41%2078%20-53%2024%20-12%2082%20-46%20129%20-77%2099%20-64%20298%20-164%20325%20-164%2010%200%2033%20-13%2051%20-29%2045%20-39%2071%20-51%20110%20-51%2018%200%2053%20-9%2077%20-20%2024%20-11%20101%20-34%20170%20-50%20160%20-38%20229%20-58%20236%20-70%204%20-6%20202%20-10%20519%20-10%20513%200%20513%200%20557%2024%2040%2022%20111%2040%20268%2067%2029%205%2074%2021%2099%2034%2026%2014%2062%2025%2080%2025%2039%200%2092%2021%20111%2043%207%2010%2036%2024%2064%2032%2027%208%2065%2026%2083%2040%2019%2014%2051%2032%2072%2039%20153%2054%20454%20261%20630%20435%2097%2094%20242%20256%20242%20269%200%204%2019%2030%2041%2057%2076%2092%20195%20351%20256%20555%2056%20191%2067%20729%2018%20885%20-9%2028%20-22%2080%20-30%20116%20-26%20124%20-89%20292%20-175%20470%20-66%20138%20-179%20286%20-328%20433%20-114%20112%20-138%20133%20-239%20205%20-26%2019%20-62%2047%20-78%2063%20-62%2056%20-460%20240%20-595%20273%20-30%208%20-118%2032%20-195%2055%20-88%2025%20-172%2042%20-225%2046%20-174%2013%20-162%2047%2044%20129%2038%2015%2092%2042%20120%2060%2028%2018%2065%2041%2082%2051%20248%20151%20501%20398%20680%20664%2017%2025%2052%2077%2079%20115%2043%2063%2086%20138%20148%20260%2011%2022%2035%2065%2053%2095%2018%2030%2038%2073%2044%2095%207%2022%2017%2045%2022%2052%2022%2027%20148%20344%20148%20372%200%207%2016%2048%2035%2091%2019%2043%2035%2086%2035%2096%200%2011%2013%2046%2029%2079%2015%2034%2033%2089%2039%20124%206%2035%2020%2078%2031%2097%2011%2018%2034%2091%2052%20161%2057%20229%20115%20344%20216%20428%2090%2075%20148%20116%20173%20121%2014%203%2045%2012%2070%2021%2025%208%2073%2020%20108%2026%2062%2011%2062%2011%2062%20234%200%20223%200%20223%20-683%20223%20-587%200%20-688%20-2%20-714%20-15%20-42%20-21%20-231%20-51%20-403%20-65%20-80%20-6%20-176%20-18%20-215%20-25%20-38%20-8%20-101%20-17%20-140%20-20%20-38%20-3%20-110%20-14%20-160%20-25%20-49%20-10%20-123%20-21%20-163%20-25%20-40%20-3%20-93%20-15%20-119%20-27%20-25%20-11%20-80%20-24%20-121%20-30%20-42%20-5%20-95%20-19%20-121%20-33%20-26%20-13%20-76%20-29%20-111%20-35%20-35%20-6%20-84%20-22%20-109%20-34%20-25%20-13%20-79%20-33%20-120%20-45%20-76%20-23%20-207%20-77%20-316%20-131%20-33%20-16%20-78%20-37%20-100%20-45%20-22%20-9%20-51%20-27%20-65%20-40%20-14%20-13%20-41%20-31%20-60%20-39%20-20%20-8%20-44%20-24%20-55%20-36%20-11%20-12%20-36%20-31%20-55%20-41%20-94%20-50%20-364%20-282%20-477%20-408%20-165%20-186%20-234%20-276%20-369%20-481%20-52%20-79%20-220%20-411%20-229%20-451%20-9%20-43%20-49%20-121%20-69%20-138%20-24%20-20%20-42%20-7%20-65%2044%20-39%2089%20-343%20458%20-429%20522%20-20%2015%20-59%2046%20-87%2068%20-213%20171%20-413%20279%20-630%20340%20-327%2092%20-610%2087%20-790%20-14%20-27%20-15%20-68%20-34%20-90%20-41%20-37%20-12%20-70%20-29%20-245%20-131%20-72%20-41%20-178%20-113%20-261%20-175%20-104%20-78%20-429%20-433%20-429%20-468%200%20-4%20-15%20-31%20-34%20-59%20-80%20-124%20-164%20-324%20-202%20-482%20-8%20-33%20-27%20-109%20-42%20-170%20-38%20-154%20-40%20-694%20-4%20-831%2012%20-45%2026%20-114%2032%20-155%2010%20-63%2050%20-207%2081%20-287%2016%20-40%2052%20-48%20107%20-24%2026%2012%2094%2036%20152%2054%20173%2053%20162%2025%20164%20414%201%20329%201%20329%2032%20386%2018%2031%2035%2081%2039%20110%2021%20155%20258%20446%20425%20521%2025%2011%2059%2030%2075%2042%2017%2013%2046%2026%2065%2030%2019%204%2059%2021%2089%2036%2030%2016%2063%2029%2075%2029%2012%200%2073%2012%20136%2026%20143%2033%20299%2031%20388%20-5%2029%20-11%2063%20-21%2075%20-21%2013%200%2054%20-16%2093%20-35%2038%20-19%2073%20-35%2079%20-35%208%200%2040%20-20%20131%20-81%20121%20-81%20185%20-145%20305%20-306%2089%20-118%20201%20-397%20219%20-545%2026%20-208%2030%20-251%2030%20-358%200%20-63%20-5%20-142%20-10%20-175%20-6%20-33%20-14%20-104%20-19%20-157%20-12%20-133%20-91%20-405%20-145%20-498%20-14%20-25%20-26%20-52%20-26%20-61%200%20-52%20-161%20-325%20-275%20-466%20-91%20-114%20-379%20-367%20-517%20-455%20-39%20-25%20-135%20-93%20-228%20-162%20-19%20-14%20-60%20-46%20-90%20-71%20-30%20-25%20-75%20-57%20-100%20-72%20-25%20-15%20-83%20-52%20-130%20-83%20-131%20-87%20-409%20-220%20-519%20-250%20-24%20-6%20-60%20-22%20-80%20-36%20-20%20-13%20-60%20-28%20-89%20-34%20-28%20-5%20-69%20-18%20-89%20-29%20-21%20-10%20-58%20-22%20-83%20-26%20-25%20-3%20-85%20-17%20-135%20-30%20-49%20-13%20-160%20-36%20-245%20-50%20-258%20-45%20-925%20-47%20-1074%20-4%20-17%205%20-78%2016%20-134%2024%20-57%208%20-133%2024%20-169%2035%20-36%2011%20-77%2020%20-92%2020%20-14%200%20-49%2011%20-77%2024%20-28%2013%20-75%2029%20-105%2035%20-30%207%20-71%2023%20-91%2038%20-21%2014%20-61%2031%20-90%2038%20-65%2016%20-260%20102%20-313%20138%20-22%2015%20-44%2027%20-49%2027%20-5%200%20-39%2019%20-75%2042%20-245%20156%20-250%20159%20-390%20277%20-163%20138%20-395%20370%20-422%20423%20-11%2021%20-32%2046%20-47%2055%20-15%2010%20-31%2024%20-36%2033%20-5%208%20-27%2033%20-49%2055%20-42%2043%20-133%20173%20-182%20258%20-16%2029%20-40%2066%20-51%2083%20-42%2057%20-173%20324%20-203%20411%20-16%2048%20-37%20106%20-46%20127%20-9%2021%20-23%2077%20-31%20124%20-9%2047%20-26%20117%20-39%20156%20-45%20139%20-42%20942%204%201071%2012%2033%2029%20109%2037%20170%208%2060%2023%20134%2033%20165%2010%2030%2030%2093%2044%20140%2014%2047%2032%20105%2040%20130%2019%2058%2083%20208%2096%20223%205%207%2018%2035%2029%2062%2011%2028%2041%2084%2066%20125%2025%2041%2046%2078%2046%2083%200%208%2060%20101%20120%20186%2014%2020%2052%2063%2084%2096%2031%2033%2072%2083%2090%20110%2035%2053%20128%20144%20216%20210%2029%2022%2072%2058%2095%2080%2097%2090%20144%20123%20276%20194%2030%2016%2061%2037%2069%2046%2018%2021%20322%20173%20415%20208%20178%2065%20243%2086%20280%2092%2022%204%2060%2018%2084%2032%2029%2017%2069%2028%20120%2034%2042%205%20108%2020%20146%2034%2042%2015%20112%2029%20175%2034%20167%2016%20194%2034%20194%20129%202%20398%2025%20372%20-321%20371%20-318%20-1%20-318%20-1%20-370%20-30z%20m8268%20-539%20c29%20-16%2023%20-53%20-17%20-101%20-19%20-23%20-44%20-59%20-55%20-78%20-10%20-20%20-43%20-70%20-74%20-111%20-118%20-162%20-173%20-244%20-262%20-395%20-105%20-177%20-209%20-368%20-231%20-425%20-11%20-30%20-44%20-100%20-72%20-155%20-29%20-55%20-61%20-118%20-72%20-139%20-11%20-22%20-34%20-61%20-52%20-88%20-17%20-26%20-47%20-73%20-66%20-105%20-111%20-181%20-200%20-313%20-269%20-396%20-31%20-38%20-67%20-83%20-81%20-102%20-133%20-175%20-448%20-509%20-581%20-615%20-48%20-38%20-113%20-96%20-146%20-128%20-32%20-31%20-110%20-95%20-173%20-140%20-63%20-46%20-140%20-103%20-170%20-127%20-54%20-44%20-248%20-165%20-265%20-165%20-4%200%20-22%20-11%20-39%20-24%20-17%20-13%20-56%20-36%20-86%20-51%20-30%20-15%20-64%20-35%20-75%20-46%20-11%20-10%20-38%20-26%20-60%20-35%20-22%20-9%20-55%20-29%20-73%20-45%20-43%20-38%20-86%20-42%20-109%20-11%20-25%2032%20-10%20547%2021%20732%208%2047%2017%20123%2020%20169%203%2046%2016%20125%2030%20175%2013%2050%2027%20120%2031%20154%203%2035%2011%2076%2017%2090%206%2015%2023%2074%2038%20132%2045%20171%2065%20234%2083%20260%209%2014%2021%2047%2027%2074%206%2027%2022%2062%2035%2077%2013%2016%2031%2053%2039%2083%209%2030%2021%2058%2027%2062%206%204%2022%2032%2036%2063%2029%2067%20122%20218%20172%20281%2084%20105%20303%20332%20367%20380%2025%2019%2065%2051%2087%2071%2068%2057%20227%20170%20297%20210%2025%2014%2079%2045%20120%2069%20177%20102%20408%20196%20617%20253%20239%2064%20268%2070%20360%2078%2051%204%20108%2012%20125%2018%2079%2025%20192%2044%20303%2051%2066%204%20128%207%20138%208%2010%201%2027%20-3%2038%20-8z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201352%20776%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cg%20transform%3D%22translate%280.000000%2C776.000000%29%20scale%280.100000%2C-0.100000%29%22%20fill%3D%22%23000000%22%20stroke%3D%22none%22%3E%20%3Cpath%20d%3D%22M3553%207729%20c-37%20-21%20-75%20-32%20-135%20-40%20-45%20-5%20-153%20-26%20-238%20-45%20-85%20-20%20-186%20-42%20-224%20-50%20-39%20-8%20-85%20-23%20-104%20-35%20-19%20-11%20-66%20-26%20-104%20-34%20-38%20-8%20-88%20-26%20-111%20-39%20-23%20-13%20-62%20-30%20-87%20-36%20-25%20-7%20-63%20-22%20-85%20-35%20-22%20-12%20-65%20-31%20-95%20-40%20-30%20-10%20-111%20-45%20-180%20-78%20-69%20-32%20-152%20-72%20-185%20-88%20-157%20-75%20-510%20-307%20-700%20-460%20-99%20-80%20-340%20-309%20-427%20-405%20-141%20-156%20-176%20-201%20-263%20-334%20-48%20-74%20-98%20-146%20-111%20-160%20-13%20-14%20-30%20-45%20-39%20-70%20-9%20-24%20-28%20-65%20-44%20-90%20-42%20-67%20-120%20-242%20-187%20-418%20-13%20-34%20-32%20-79%20-43%20-100%20-10%20-20%20-31%20-98%20-46%20-172%20-14%20-74%20-35%20-174%20-46%20-221%20-10%20-48%20-24%20-151%20-29%20-230%20-5%20-79%20-17%20-184%20-25%20-234%20-20%20-122%20-19%20-244%205%20-470%2011%20-104%2020%20-216%2020%20-249%200%20-117%2088%20-583%20126%20-661%2013%20-29%2027%20-67%2030%20-86%204%20-19%2017%20-54%2030%20-79%2013%20-25%2039%20-90%2059%20-145%2020%20-55%2048%20-120%2064%20-145%2035%20-55%2059%20-102%20105%20-200%2019%20-41%2054%20-100%2078%20-130%2023%20-30%2074%20-101%20112%20-157%20128%20-183%20459%20-516%20630%20-633%2047%20-32%20113%20-79%20145%20-104%2033%20-24%2075%20-52%2093%20-62%2018%20-9%2054%20-32%2081%20-50%2077%20-53%20575%20-294%20607%20-294%208%200%2038%20-11%2067%20-24%2028%20-13%2077%20-30%20110%20-36%2032%20-7%2075%20-21%2097%20-32%2021%20-11%2068%20-26%20105%20-34%20164%20-37%20281%20-65%20346%20-83%2039%20-11%2097%20-20%20130%20-20%2034%20-1%20103%20-12%20155%20-25%20155%20-40%20299%20-49%20750%20-49%20436%200%20633%2013%20718%2049%2020%208%2084%2019%20142%2024%2058%205%20130%2018%20160%2028%2030%2010%2078%2022%20105%2026%2028%204%2077%2016%20110%2026%2033%2010%2087%2024%20120%2030%2033%207%2070%2018%2082%2026%2013%208%2053%2021%2090%2030%2037%208%2083%2022%20102%2031%2020%208%2061%2023%2091%2033%2030%2010%2093%2035%20140%2055%2047%2020%20119%2050%20160%2067%2041%2016%20116%2050%20165%2075%2050%2025%20113%2054%20140%2065%2028%2011%2064%2030%2082%2044%2017%2013%2036%2024%2041%2024%205%200%2040%2020%2078%2045%2038%2024%2072%2045%2075%2045%2013%200%20188%20105%20287%20171%2057%2038%20108%2069%20112%2069%204%200%2027%2016%2050%2035%2023%2019%2046%2035%2050%2035%205%200%2035%2022%2067%2048%2032%2027%20108%2084%20168%20127%2061%2043%20151%20113%20200%20155%2050%2042%20101%2084%20115%2093%2030%2021%20146%20125%20209%20188%20141%20142%20483%20442%20622%20547%20181%20135%20172%20128%20377%20272%20222%20154%20484%20314%20582%20354%2030%2013%2073%2035%2094%2049%2021%2015%2044%2027%2051%2027%207%200%2036%2013%2066%2029%2030%2015%2072%2034%2094%2041%2022%207%2056%2021%2075%2031%20161%2087%20490%20114%20710%2060%2047%20-11%20112%20-27%20145%20-35%2090%20-22%20217%20-68%20250%20-92%2017%20-11%2049%20-28%2071%20-37%20249%20-97%20553%20-397%20658%20-648%2049%20-117%2096%20-348%2096%20-468%200%20-236%20-114%20-562%20-265%20-756%20-17%20-22%20-42%20-58%20-56%20-80%20-60%20-92%20-280%20-305%20-380%20-368%20-24%20-15%20-71%20-45%20-104%20-67%20-103%20-68%20-216%20-122%20-325%20-156%20-58%20-18%20-123%20-39%20-145%20-47%20-113%20-42%20-607%20-36%20-709%208%20-22%209%20-67%2021%20-100%2026%20-34%206%20-86%2022%20-116%2036%20-30%2014%20-84%2035%20-120%2048%20-36%2012%20-87%2036%20-114%2054%20-28%2017%20-55%2031%20-62%2031%20-7%200%20-25%2011%20-41%2024%20-15%2013%20-53%2036%20-83%2051%20-30%2015%20-68%2039%20-85%2052%20-16%2013%20-61%2047%20-100%2074%20-38%2028%20-132%20111%20-208%20185%20-159%20156%20-166%20158%20-244%2094%20-26%20-22%20-95%20-76%20-153%20-121%20-182%20-142%20-181%20-131%20-17%20-320%2067%20-78%20131%20-153%20142%20-168%2043%20-58%20214%20-215%20350%20-321%2032%20-25%2074%20-59%2094%20-76%2020%20-17%2055%20-41%2078%20-53%2024%20-12%2082%20-46%20129%20-77%2099%20-64%20298%20-164%20325%20-164%2010%200%2033%20-13%2051%20-29%2045%20-39%2071%20-51%20110%20-51%2018%200%2053%20-9%2077%20-20%2024%20-11%20101%20-34%20170%20-50%20160%20-38%20229%20-58%20236%20-70%204%20-6%20202%20-10%20519%20-10%20513%200%20513%200%20557%2024%2040%2022%20111%2040%20268%2067%2029%205%2074%2021%2099%2034%2026%2014%2062%2025%2080%2025%2039%200%2092%2021%20111%2043%207%2010%2036%2024%2064%2032%2027%208%2065%2026%2083%2040%2019%2014%2051%2032%2072%2039%20153%2054%20454%20261%20630%20435%2097%2094%20242%20256%20242%20269%200%204%2019%2030%2041%2057%2076%2092%20195%20351%20256%20555%2056%20191%2067%20729%2018%20885%20-9%2028%20-22%2080%20-30%20116%20-26%20124%20-89%20292%20-175%20470%20-66%20138%20-179%20286%20-328%20433%20-114%20112%20-138%20133%20-239%20205%20-26%2019%20-62%2047%20-78%2063%20-62%2056%20-460%20240%20-595%20273%20-30%208%20-118%2032%20-195%2055%20-88%2025%20-172%2042%20-225%2046%20-174%2013%20-162%2047%2044%20129%2038%2015%2092%2042%20120%2060%2028%2018%2065%2041%2082%2051%20248%20151%20501%20398%20680%20664%2017%2025%2052%2077%2079%20115%2043%2063%2086%20138%20148%20260%2011%2022%2035%2065%2053%2095%2018%2030%2038%2073%2044%2095%207%2022%2017%2045%2022%2052%2022%2027%20148%20344%20148%20372%200%207%2016%2048%2035%2091%2019%2043%2035%2086%2035%2096%200%2011%2013%2046%2029%2079%2015%2034%2033%2089%2039%20124%206%2035%2020%2078%2031%2097%2011%2018%2034%2091%2052%20161%2057%20229%20115%20344%20216%20428%2090%2075%20148%20116%20173%20121%2014%203%2045%2012%2070%2021%2025%208%2073%2020%20108%2026%2062%2011%2062%2011%2062%20234%200%20223%200%20223%20-683%20223%20-587%200%20-688%20-2%20-714%20-15%20-42%20-21%20-231%20-51%20-403%20-65%20-80%20-6%20-176%20-18%20-215%20-25%20-38%20-8%20-101%20-17%20-140%20-20%20-38%20-3%20-110%20-14%20-160%20-25%20-49%20-10%20-123%20-21%20-163%20-25%20-40%20-3%20-93%20-15%20-119%20-27%20-25%20-11%20-80%20-24%20-121%20-30%20-42%20-5%20-95%20-19%20-121%20-33%20-26%20-13%20-76%20-29%20-111%20-35%20-35%20-6%20-84%20-22%20-109%20-34%20-25%20-13%20-79%20-33%20-120%20-45%20-76%20-23%20-207%20-77%20-316%20-131%20-33%20-16%20-78%20-37%20-100%20-45%20-22%20-9%20-51%20-27%20-65%20-40%20-14%20-13%20-41%20-31%20-60%20-39%20-20%20-8%20-44%20-24%20-55%20-36%20-11%20-12%20-36%20-31%20-55%20-41%20-94%20-50%20-364%20-282%20-477%20-408%20-165%20-186%20-234%20-276%20-369%20-481%20-52%20-79%20-220%20-411%20-229%20-451%20-9%20-43%20-49%20-121%20-69%20-138%20-24%20-20%20-42%20-7%20-65%2044%20-39%2089%20-343%20458%20-429%20522%20-20%2015%20-59%2046%20-87%2068%20-213%20171%20-413%20279%20-630%20340%20-327%2092%20-610%2087%20-790%20-14%20-27%20-15%20-68%20-34%20-90%20-41%20-37%20-12%20-70%20-29%20-245%20-131%20-72%20-41%20-178%20-113%20-261%20-175%20-104%20-78%20-429%20-433%20-429%20-468%200%20-4%20-15%20-31%20-34%20-59%20-80%20-124%20-164%20-324%20-202%20-482%20-8%20-33%20-27%20-109%20-42%20-170%20-38%20-154%20-40%20-694%20-4%20-831%2012%20-45%2026%20-114%2032%20-155%2010%20-63%2050%20-207%2081%20-287%2016%20-40%2052%20-48%20107%20-24%2026%2012%2094%2036%20152%2054%20173%2053%20162%2025%20164%20414%201%20329%201%20329%2032%20386%2018%2031%2035%2081%2039%20110%2021%20155%20258%20446%20425%20521%2025%2011%2059%2030%2075%2042%2017%2013%2046%2026%2065%2030%2019%204%2059%2021%2089%2036%2030%2016%2063%2029%2075%2029%2012%200%2073%2012%20136%2026%20143%2033%20299%2031%20388%20-5%2029%20-11%2063%20-21%2075%20-21%2013%200%2054%20-16%2093%20-35%2038%20-19%2073%20-35%2079%20-35%208%200%2040%20-20%20131%20-81%20121%20-81%20185%20-145%20305%20-306%2089%20-118%20201%20-397%20219%20-545%2026%20-208%2030%20-251%2030%20-358%200%20-63%20-5%20-142%20-10%20-175%20-6%20-33%20-14%20-104%20-19%20-157%20-12%20-133%20-91%20-405%20-145%20-498%20-14%20-25%20-26%20-52%20-26%20-61%200%20-52%20-161%20-325%20-275%20-466%20-91%20-114%20-379%20-367%20-517%20-455%20-39%20-25%20-135%20-93%20-228%20-162%20-19%20-14%20-60%20-46%20-90%20-71%20-30%20-25%20-75%20-57%20-100%20-72%20-25%20-15%20-83%20-52%20-130%20-83%20-131%20-87%20-409%20-220%20-519%20-250%20-24%20-6%20-60%20-22%20-80%20-36%20-20%20-13%20-60%20-28%20-89%20-34%20-28%20-5%20-69%20-18%20-89%20-29%20-21%20-10%20-58%20-22%20-83%20-26%20-25%20-3%20-85%20-17%20-135%20-30%20-49%20-13%20-160%20-36%20-245%20-50%20-258%20-45%20-925%20-47%20-1074%20-4%20-17%205%20-78%2016%20-134%2024%20-57%208%20-133%2024%20-169%2035%20-36%2011%20-77%2020%20-92%2020%20-14%200%20-49%2011%20-77%2024%20-28%2013%20-75%2029%20-105%2035%20-30%207%20-71%2023%20-91%2038%20-21%2014%20-61%2031%20-90%2038%20-65%2016%20-260%20102%20-313%20138%20-22%2015%20-44%2027%20-49%2027%20-5%200%20-39%2019%20-75%2042%20-245%20156%20-250%20159%20-390%20277%20-163%20138%20-395%20370%20-422%20423%20-11%2021%20-32%2046%20-47%2055%20-15%2010%20-31%2024%20-36%2033%20-5%208%20-27%2033%20-49%2055%20-42%2043%20-133%20173%20-182%20258%20-16%2029%20-40%2066%20-51%2083%20-42%2057%20-173%20324%20-203%20411%20-16%2048%20-37%20106%20-46%20127%20-9%2021%20-23%2077%20-31%20124%20-9%2047%20-26%20117%20-39%20156%20-45%20139%20-42%20942%204%201071%2012%2033%2029%20109%2037%20170%208%2060%2023%20134%2033%20165%2010%2030%2030%2093%2044%20140%2014%2047%2032%20105%2040%20130%2019%2058%2083%20208%2096%20223%205%207%2018%2035%2029%2062%2011%2028%2041%2084%2066%20125%2025%2041%2046%2078%2046%2083%200%208%2060%20101%20120%20186%2014%2020%2052%2063%2084%2096%2031%2033%2072%2083%2090%20110%2035%2053%20128%20144%20216%20210%2029%2022%2072%2058%2095%2080%2097%2090%20144%20123%20276%20194%2030%2016%2061%2037%2069%2046%2018%2021%20322%20173%20415%20208%20178%2065%20243%2086%20280%2092%2022%204%2060%2018%2084%2032%2029%2017%2069%2028%20120%2034%2042%205%20108%2020%20146%2034%2042%2015%20112%2029%20175%2034%20167%2016%20194%2034%20194%20129%202%20398%2025%20372%20-321%20371%20-318%20-1%20-318%20-1%20-370%20-30z%20m8268%20-539%20c29%20-16%2023%20-53%20-17%20-101%20-19%20-23%20-44%20-59%20-55%20-78%20-10%20-20%20-43%20-70%20-74%20-111%20-118%20-162%20-173%20-244%20-262%20-395%20-105%20-177%20-209%20-368%20-231%20-425%20-11%20-30%20-44%20-100%20-72%20-155%20-29%20-55%20-61%20-118%20-72%20-139%20-11%20-22%20-34%20-61%20-52%20-88%20-17%20-26%20-47%20-73%20-66%20-105%20-111%20-181%20-200%20-313%20-269%20-396%20-31%20-38%20-67%20-83%20-81%20-102%20-133%20-175%20-448%20-509%20-581%20-615%20-48%20-38%20-113%20-96%20-146%20-128%20-32%20-31%20-110%20-95%20-173%20-140%20-63%20-46%20-140%20-103%20-170%20-127%20-54%20-44%20-248%20-165%20-265%20-165%20-4%200%20-22%20-11%20-39%20-24%20-17%20-13%20-56%20-36%20-86%20-51%20-30%20-15%20-64%20-35%20-75%20-46%20-11%20-10%20-38%20-26%20-60%20-35%20-22%20-9%20-55%20-29%20-73%20-45%20-43%20-38%20-86%20-42%20-109%20-11%20-25%2032%20-10%20547%2021%20732%208%2047%2017%20123%2020%20169%203%2046%2016%20125%2030%20175%2013%2050%2027%20120%2031%20154%203%2035%2011%2076%2017%2090%206%2015%2023%2074%2038%20132%2045%20171%2065%20234%2083%20260%209%2014%2021%2047%2027%2074%206%2027%2022%2062%2035%2077%2013%2016%2031%2053%2039%2083%209%2030%2021%2058%2027%2062%206%204%2022%2032%2036%2063%2029%2067%20122%20218%20172%20281%2084%20105%20303%20332%20367%20380%2025%2019%2065%2051%2087%2071%2068%2057%20227%20170%20297%20210%2025%2014%2079%2045%20120%2069%20177%20102%20408%20196%20617%20253%20239%2064%20268%2070%20360%2078%2051%204%20108%2012%20125%2018%2079%2025%20192%2044%20303%2051%2066%204%20128%207%20138%208%2010%201%2027%20-3%2038%20-8z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;}

/* ─── La cabecera ──────────────────────────────────────────── */
/* Base: bloque 01 (pegajosa, se contrae al bajar, menú a pantalla
   completa en el teléfono). Encima, el panel desplegable del bloque
   02 colgado de «Tienda». Nada de esto es CSS nuevo por gusto: son
   los dos bloques combinados, que es lo que toca antes de inventar. */
.al-cab{z-index:70;}
.b-cab1 nav{gap:clamp(18px,2.1vw,34px);}
/* Subrayado que crece. Entra desde la izquierda y sale por la
   derecha: el movimiento cuenta de dónde vienes. */
.b-cab1 nav a{position:relative;padding-block:7px;
  transition:color var(--d-corta) var(--e-suave);}
.b-cab1 nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--ac-tx);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .5s var(--e-salida);}
.b-cab1 nav a:hover::after,
.b-cab1 nav a:focus-visible::after,
.b-cab1 nav a[aria-current]::after{transform:scaleX(1);transform-origin:0 50%;}
.b-cab1 nav a[aria-current]{color:var(--tx-1);}

/* «Tienda» lleva una punta de flecha que gira al abrirse el panel. */
.b-cab1 .desp{position:relative;display:inline-flex;align-items:center;gap:7px;}
.b-cab1 .desp .fl{width:6px;height:6px;border-right:1.2px solid var(--tx-3);
  border-bottom:1.2px solid var(--tx-3);transform:translateY(-2px) rotate(45deg);
  transition:transform var(--d-corta) var(--e-suave),border-color var(--d-corta) var(--e-suave);}
.al-cab:has(.desp:hover) .desp .fl,
.al-cab:has(.al-panel:hover) .desp .fl{transform:translateY(1px) rotate(-135deg);
  border-color:var(--ac-tx);}

/* El panel. Cerrado no ocupa ni pinta: sin borde, sin fondo. */
.al-panel{position:absolute;left:0;right:0;top:100%;background:var(--sup-1);
  border-bottom:var(--bd) solid transparent;
  box-shadow:0 24px 44px -34px rgba(22,24,31,0);
  transition:border-color .45s var(--e-suave),box-shadow .45s var(--e-suave);}
.al-panel .mega{grid-template-columns:1.15fr 1fr 1fr;max-width:1480px;
  margin-inline:auto;background:transparent;border-top:0;gap:0;
  transition:max-height .55s var(--e-salida);}
.al-panel .mega > div{background:transparent;padding:38px clamp(24px,3vw,54px);
  border-left:var(--bd) solid var(--ln-1);opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--e-suave),transform .5s var(--e-salida);}
.al-panel .mega > div:first-child{border-left:0;padding-left:var(--mx);}
.al-panel .mega > div:last-child{padding-right:var(--mx);}
/* Abierto: al pasar por «Tienda», al entrar en el propio panel o al
   llegar con el tabulador. Las tres columnas entran escalonadas. */
.al-cab:has(.desp:hover) .al-panel,
.al-cab:has(.desp:focus-within) .al-panel,
.al-cab:has(.al-panel:hover) .al-panel,
.al-cab:has(.al-panel:focus-within) .al-panel{
  border-bottom-color:var(--ln-1);box-shadow:0 24px 44px -34px rgba(22,24,31,.5);}
.al-cab:has(.desp:hover) .al-panel .mega,
.al-cab:has(.desp:focus-within) .al-panel .mega,
.al-cab:has(.al-panel:hover) .al-panel .mega,
.al-cab:has(.al-panel:focus-within) .al-panel .mega{max-height:440px;}
.al-cab:has(.desp:hover) .al-panel .mega > div,
.al-cab:has(.desp:focus-within) .al-panel .mega > div,
.al-cab:has(.al-panel:hover) .al-panel .mega > div,
.al-cab:has(.al-panel:focus-within) .al-panel .mega > div{opacity:1;transform:none;}
.al-panel .mega > div:nth-child(2){transition-delay:.06s;}
.al-panel .mega > div:nth-child(3){transition-delay:.12s;}

/* Las familias, con su recuento. La flecha aparece al acercarse. */
.al-panel .mega .fams a{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding:11px 0;font-family:var(--f-tit);font-size:var(--t-sm);
  letter-spacing:var(--tr-tit);color:var(--tx-1);}
.al-panel .mega .fams a small{font-family:var(--f-txt);font-size:var(--t-mic);
  letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);color:var(--tx-3);
  transition:color var(--d-corta) var(--e-suave);}
.al-panel .mega .fams a span{position:relative;}
.al-panel .mega .fams a span::after{content:'';position:absolute;left:0;right:0;bottom:-3px;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--e-salida);}
.al-panel .mega .fams a:hover span::after{transform:scaleX(1);}
.al-panel .mega .fams a:hover small{color:var(--ac-tx);}

/* El destacado: una pieza de verdad, con su precio. */
/* Ojo con la especificidad: el bloque 02 trae `.b-cab2 .mega a`, que
   pesa más que `.al-panel .pieza`. Por eso aquí se nombra el tipo. */
.al-panel .mega a.pieza{display:flex;gap:16px;align-items:center;
  padding:0;border-bottom:0;}
.al-panel .mega a.pieza:hover{padding-left:0;}
.al-panel .dest{display:flex;flex-direction:column;}
.al-panel .mega a.pieza + a.pieza{margin-top:18px;}
/* El cierre no es un botón: en un menú, un enlace con su flecha pesa
   menos y se lee antes. La flecha sale a buscar el dedo. */
.al-panel .mega a.todo{display:inline-flex;align-items:center;gap:9px;
  margin-top:auto;padding:14px 0 0;border-bottom:0;width:auto;
  font-size:var(--t-min);letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);
  font-weight:500;color:var(--ac-tx);}
.al-panel .mega a.todo span{position:relative;}
.al-panel .mega a.todo span::after{content:'';position:absolute;left:0;right:0;
  bottom:-4px;height:1px;background:currentColor;transform:scaleX(1);
  transform-origin:0 50%;transition:transform .45s var(--e-salida);}
.al-panel .mega a.todo:hover span::after{transform:scaleX(0);transform-origin:100% 50%;}
.al-panel .mega a.todo em{font-style:normal;
  transition:transform .45s var(--e-salida);}
.al-panel .mega a.todo:hover em{transform:translateX(6px);}
.al-panel .serv{display:flex;flex-direction:column;}
.al-panel .mega a.pieza .im{position:relative;flex:none;width:84px;aspect-ratio:1/1;
  overflow:hidden;background:var(--sup-2);}
.al-panel .mega a.pieza .im img{width:100%;height:100%;object-fit:cover;display:block;
  filter:var(--foto-fil);transition:transform 1s var(--e-salida);}
.al-panel .mega a.pieza .im::after{content:'';position:absolute;inset:0;
  background:var(--portada);mix-blend-mode:screen;opacity:var(--foto-velo);}
.al-panel .mega a.pieza:hover .im img{transform:scale(1.06);}
.al-panel .mega a.pieza .tx{display:flex;flex-direction:column;gap:6px;}
.al-panel .mega a.pieza b{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:var(--t-sm);letter-spacing:var(--tr-tit);color:var(--tx-1);}
.al-panel .mega a.pieza i{font-style:normal;font-size:var(--t-min);color:var(--tx-2);}

.al-panel .serv p{font-size:var(--t-min);color:var(--tx-2);margin-bottom:9px;
  padding-left:15px;position:relative;}
.al-panel .serv p::before{content:'';position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--ac);}
.al-panel .serv .bt-2{margin-top:14px;}
.al-panel h2{font-size:var(--t-mic);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);margin-bottom:16px;font-weight:500;}

/* En el teléfono no hay panel: manda el menú a pantalla completa. */
@media(max-width:1080px){
  .al-panel{display:none;}
  .b-cab1 .desp .fl{display:none;}
}

/* ─── El menú del teléfono ─────────────────────────────────── */
/* ARREGLO. El menú se abría con la altura de la cabecera, no la de
   la pantalla: `backdrop-filter` en la cabecera convierte a ésta en
   el bloque contenedor de todo lo que lleve `position:fixed` dentro,
   así que el panel medía 135 px y los enlaces caían fuera, encima de
   la portada. Quitando el desenfoque mientras el menú está abierto,
   el panel vuelve a medir la pantalla. */
.al-cab:has(.movil.abierto){backdrop-filter:none;-webkit-backdrop-filter:none;}

/* Los enlaces entran uno detrás de otro. Es media décima de segundo
   pero es la diferencia entre que aparezca y que se abra. */
.b-cab1 .movil{justify-content:flex-start;padding-top:clamp(96px,16vh,150px);}
.b-cab1 .movil .mv-in{width:100%;}
/* Es un <div>, no un <nav>: dentro de .b-cab1, la regla del bloque
   `.b-cab1 nav` lo ponía en fila y centrado. */
.b-cab1 .movil .mv-nav{display:flex;flex-direction:column;text-align:left;}
.b-cab1 .movil .mv-nav a{text-transform:var(--tt-tit);
  font-size:clamp(27px,7vw,46px);}
.b-cab1 .movil a{opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--e-suave),transform .55s var(--e-salida),
             color var(--d-corta) var(--e-suave);}
.b-cab1 .movil.abierto a{opacity:1;transform:none;}
.b-cab1 .movil.abierto .mv-nav a:nth-child(1){transition-delay:.05s;}
.b-cab1 .movil.abierto .mv-nav a:nth-child(2){transition-delay:.10s;}
.b-cab1 .movil.abierto .mv-nav a:nth-child(3){transition-delay:.15s;}
.b-cab1 .movil.abierto .mv-nav a:nth-child(4){transition-delay:.20s;}
.b-cab1 .movil.abierto .mv-nav a:nth-child(5){transition-delay:.25s;}
.b-cab1 .movil a:active{color:var(--ac-tx);}
.b-cab1 .movil a[aria-current]{color:var(--ac-tx);}
.b-cab1 .movil .mv-fam{margin-top:clamp(22px,4vh,40px);}
.b-cab1 .movil .mv-fam h2{font-size:var(--t-mic);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);margin-bottom:12px;font-weight:500;}
.b-cab1 .movil .mv-fam a{display:inline-block;font-family:var(--f-txt);
  font-size:var(--t-min);letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);
  color:var(--tx-2);border:0;padding:8px 14px 8px 0;
  transition-delay:.3s;}

/* ─── Marca y cesta en la cabecera ─────────────────────────── */
.b-cab1 .logo{display:flex;align-items:center;gap:13px;
  font-size:clamp(18px,2vw,24px);}
.b-cab1 .logo > span{display:block;line-height:1.05;}
.b-cab1 .logo .mono{width:46px;height:26px;color:var(--ac-tx);}
.b-pie .marca{display:block;}
/* El pie solo da estilo a los enlaces de la línea legal; el texto
   del Kit Digital es un span y se quedaba dos tamaños por encima. */
.b-pie .legal span{font-size:var(--t-min);color:var(--tx-3);}
.b-pie .marca .mono{width:80px;height:46px;color:var(--ac-tx);margin-bottom:16px;}
.b-cab1 .cesta{position:relative;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:var(--tx-1);
  transition:color var(--d-micro) var(--e-suave);}
.b-cab1 .cesta:hover{color:var(--ac-tx);}
.b-cab1 .cesta svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}
.b-cab1 .cesta span{position:absolute;top:3px;right:1px;min-width:17px;height:17px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  background:var(--ac-bt);color:var(--ac-txt);font-size:var(--t-mic);font-weight:700;
  border-radius:100px;line-height:1;font-variant-numeric:tabular-nums;}

/* ─── El mosaico de familias ───────────────────────────────── */
/* Tres columnas: la celda grande ocupa dos por dos, los dos vídeos
   se apilan en la columna de la derecha y las tres familias
   restantes cierran abajo. Sin bandas a todo lo ancho. */
.b-cat .mos{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(280px,1fr);}
/* El velo iba al 22 % incluso arriba del todo y, con el fondo ya en
   blanco, lavaba la fotografía entera. Ahora solo trabaja donde hay
   texto: abajo. */
.b-cat .c::after{background:linear-gradient(to top,
  color-mix(in srgb,var(--sup-1) 94%,transparent) 0%,
  color-mix(in srgb,var(--sup-1) 56%,transparent) 30%,
  transparent 66%);}
@media(max-width:900px){.b-cat .mos{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.b-cat .mos{grid-template-columns:1fr;}}

/* ─── La banda con el logotipo en vez de foto ──────────────── */
/* Cuando haya foto de verdad de la tienda, esta celda se cambia por
   un <img> y se borra esta regla. */
/* Dos líneas como máximo también aquí: el bloque trae 16ch, que con
   una display en mayúsculas se pasa. */
.b-be h2{max-width:22ch;font-size:clamp(26px,2.9vw,46px);}
.b-be .im.marca{background:var(--portada);display:flex;align-items:center;
  justify-content:center;}
.b-be .im.marca .mono{position:static;width:min(46%,320px);aspect-ratio:1352/776;
  height:auto;color:var(--ac-tx);opacity:.9;}

/* ─── Fotografía real dentro de bloques que traían hueco ───── */
.b-ph .img img{width:100%;object-fit:cover;
  transition:transform 1s var(--e-salida);}
.b-ph article:hover .img img{transform:scale(1.05);}
.b-ph .n{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-sm);
  letter-spacing:var(--tr-tit);color:var(--tx-1);}
.b-gp figure img{width:100%;object-fit:cover;
  transition:transform 1.1s var(--e-salida);}
.b-gp figure:hover img{transform:scale(1.05);}

/* ─── Ordenar la tienda ────────────────────────────────────── */
/* A la derecha de los filtros, en la misma línea. Sin <select>: un
   desplegable del sistema operativo rompe la tipografía de la web. */
.al-orden{display:flex;align-items:center;gap:4px;margin-left:auto;}
.al-orden > span{font-size:var(--t-mic);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);margin-right:7px;}
.al-orden button{font-size:var(--t-mic);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-2);padding:8px 12px;
  border:var(--bd) solid transparent;
  transition:color var(--d-corta) var(--e-suave),
             border-color var(--d-corta) var(--e-suave);}
.al-orden button:hover{color:var(--tx-1);border-color:var(--ln-1);}
.al-orden button[aria-pressed="true"]{color:var(--ac-tx);border-color:var(--ln-3);}
@media(max-width:820px){
  .al-orden{margin-left:0;width:100%;flex-wrap:wrap;
    padding-top:12px;border-top:var(--bd) solid var(--ln-1);}
}

/* ─── El manifiesto, enmarcado ─────────────────────────────── */
/* Era la sección con más aire y menos que mirar. Ahora es un cuadro:
   el azul de la marca a sangre, el monograma en blanco a un lado y,
   encima, una lámina blanca con filete interior —como un grabado
   enmarcado—. Es el único sitio de la web donde el azul ocupa toda
   la pantalla; por eso funciona. */
.b-mr.al-cuadro{position:relative;overflow:hidden;background:var(--ac-bt);
  /* Más aire arriba que abajo: el rótulo tiene que quedar por debajo
     de la cabecera pegajosa, que mide 135 px con el menú desplegado. */
  padding:clamp(84px,9vw,152px) var(--mx) clamp(52px,7vw,116px);}
/* El monograma en blanco sobre el azul. Grande y a medio salir: se
   lee como una marca de agua, no como un logotipo puesto ahí. */
.al-cuadro .al-fondo{position:absolute;left:-9%;top:50%;
  width:min(64vw,760px);aspect-ratio:1352/776;transform:translateY(-50%);
  background:#FFFFFF;opacity:.135;pointer-events:none;z-index:0;}
/* El rótulo blanco sobre el azul: el monograma presentando la
   lámina, como el membrete de un papel. Aquí sí a plena opacidad;
   la marca de agua de detrás es otra cosa. */
.al-cuadro .al-rotulo{position:relative;z-index:2;display:flex;
  flex-direction:column;align-items:center;gap:14px;
  margin-bottom:clamp(28px,4vh,52px);color:#FFFFFF;}
.al-cuadro .al-rotulo .mono{width:clamp(84px,9vw,124px);aspect-ratio:1352/776;
  height:auto;background:currentColor;}
.al-cuadro .al-rotulo span{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:var(--t-mic);letter-spacing:6px;text-transform:var(--tt-eti);
  opacity:.72;}

/* La lámina. */
.al-cuadro .al-marco{position:relative;z-index:2;background:var(--sup-1);
  max-width:1180px;margin-inline:auto;
  padding:clamp(38px,5.4vw,92px);
  box-shadow:0 46px 100px -54px rgba(11,14,34,.72);}
/* Filete interior: la distancia entre el papel y el marco. */
.al-cuadro .al-marco::before{content:'';position:absolute;
  inset:clamp(11px,1.05vw,19px);border:1px solid var(--ln-1);
  pointer-events:none;z-index:1;}
/* El sello, dentro de la lámina y detrás del texto. */
.al-cuadro .al-sello{position:absolute;right:-4%;bottom:-14%;
  width:min(52%,520px);aspect-ratio:1352/776;
  background:var(--ac);opacity:.07;pointer-events:none;z-index:0;}
.al-cuadro .al-marco > *:not(.al-sello){position:relative;z-index:2;}
.al-cuadro .frase{max-width:20ch;}
.al-cuadro .txt{margin-top:26px;max-width:46ch;}
/* La cabecera de la lámina, como la marca de edición de un grabado:
   a la izquierda de qué es, a la derecha de cuánto. */
.al-cuadro .al-cabe{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-bottom:22px;border-bottom:var(--bd) solid var(--ln-1);
  margin-bottom:clamp(26px,3.4vh,44px);}
.al-cuadro .al-cabe .eti{margin:0;}
.al-cuadro .marca-lam{font-size:var(--t-mic);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);}
@media(max-width:560px){.al-cuadro .marca-lam{display:none;}}
.al-cuadro .apoyo{margin-top:clamp(38px,6vh,74px);}

/* La firma: quién lo dice y con qué está hecho. */
.al-cuadro .al-firma{display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-top:clamp(34px,5vh,60px);
  padding-top:26px;border-top:var(--bd) solid var(--ln-1);}
.al-cuadro .al-firma .quien{display:flex;align-items:center;gap:14px;}
.al-cuadro .al-firma .quien .mono{width:44px;height:25px;color:var(--ac-tx);}
.al-cuadro .al-firma .quien b{display:block;font-family:var(--f-tit);
  font-weight:var(--pe-tit);font-size:var(--t-sm);letter-spacing:var(--tr-tit);
  color:var(--tx-1);line-height:1.05;}
.al-cuadro .al-firma .quien small{display:block;font-size:var(--t-mic);
  letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);color:var(--tx-3);
  margin-top:5px;}
.al-cuadro .insignias{display:flex;gap:9px;flex-wrap:wrap;}
.al-cuadro .insignias span{font-size:var(--t-mic);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--ac-tx);padding:8px 14px;
  border:1px solid var(--ln-3);
  transition:background var(--d-corta) var(--e-suave),
             color var(--d-corta) var(--e-suave);}
.al-cuadro .insignias span:hover{background:var(--ac-bt);color:var(--ac-txt);}
@media(max-width:820px){
  .al-cuadro .al-fondo{left:-24%;width:96vw;opacity:.09;}
  .al-cuadro .al-sello{width:78%;bottom:-8%;right:-10%;}
  .al-cuadro .al-firma{flex-direction:column;align-items:flex-start;}
}

/* ─── ARREGLO: el texto desaparecía al pasar por encima ─────── */
/* El gesto «brillo» rellena el botón secundario con un ::before a
   z-index 1. Cuando la etiqueta es un nodo de texto suelto —sin el
   <span class="et"> que la librería sube a z-index 2— el relleno le
   pasa por encima y el botón se queda en azul y mudo.
   Se arregla sin tocar el marcado: con `isolation` el botón crea su
   propio contexto de apilado, y ahí un ::before en z-index −1 pinta
   por detrás del texto pero por delante del fondo del botón. */
[data-gesto="brillo"] .bt-2{isolation:isolate;}
[data-gesto="brillo"] .bt-2::before{z-index:-1;}

/* ─── El formato de venta: dentro de la propia foto ────────── */
/* Debajo de la tarjeta, el botón era una barra más en una rejilla
   que ya tiene muchas líneas. Dentro de la foto, apoyado abajo, no
   añade ni una fila: la tarjeta vuelve a ser foto, nombre y precio,
   y la compra está donde está mirando el ojo.
   Siempre visible, en ratón y en dedo.
   En la tienda se resuelve con retícula —la foto y el botón en la
   misma celda—; en la portada, con un marco propio para la foto,
   porque un <button> no puede ir dentro de un <a>. */
.b-tr .p{display:grid;grid-template-rows:auto auto 1fr;}
.b-tr .p .foto{grid-area:1 / 1;}
.b-tr .p .dat{grid-area:2 / 1;}
.b-tr .p .acc{grid-area:1 / 1;align-self:end;z-index:3;
  padding:0;margin:0 clamp(10px,1vw,16px) clamp(10px,1vw,16px);}
.b-ph .lam{position:relative;}
.b-ph .al-acc{position:absolute;z-index:3;
  left:clamp(10px,1vw,16px);right:clamp(10px,1vw,16px);
  bottom:clamp(10px,1vw,16px);padding:0;}

/* El botón sobre la foto: vidrio esmerilado para que se lea encima
   de cualquier fotografía, y azul macizo al tocarlo. */
.b-ph .al-acc .bt-2,.b-tr .p .acc .bt-2{
  display:flex;width:100%;justify-content:center;align-items:center;
  min-height:46px;padding:13px 16px;
  border:1px solid color-mix(in srgb,var(--ac) 22%,transparent);
  background:color-mix(in srgb,var(--sup-1) 88%,transparent);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  font-size:var(--t-mic);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);font-weight:500;color:var(--tx-tit);
  transition:background var(--d-corta) var(--e-suave),
             border-color var(--d-corta) var(--e-suave),
             color var(--d-corta) var(--e-suave);}
.b-ph .al-acc .bt-2:hover,.b-tr .p .acc .bt-2:hover,
.b-ph .al-acc .bt-2:focus-visible,.b-tr .p .acc .bt-2:focus-visible{
  background:var(--ac-bt);border-color:var(--ac-bt);color:var(--ac-txt);}
/* Y su etiqueta, por encima del relleno del gesto. */
.b-ph .al-acc .bt-2 .et,.b-tr .p .acc .bt-2 .et{position:relative;z-index:2;}
/* El pie de la tarjeta ya no lleva el botón debajo: se cierra él. */
.b-ph .pie-en{display:block;}
.b-tr .p .dat{padding-bottom:0;}
/* Al añadir, el botón lo dice: es la única confirmación que ve quien
   compra desde la portada sin abrir la cesta. */
.b-ph .al-acc .bt-2.hecho,.b-tr .p .acc .bt-2.hecho{
  background:var(--ac-bt);border-color:var(--ac-bt);color:var(--ac-txt);}
/* El visto va en ::before, no en ::after: el gesto «linea» ya usa
   el ::after de los botones para su filete, que es absoluto y con
   inset, y el símbolo salía flotando encima del texto. Con `order`
   se coloca igualmente a la derecha. */
.b-ph .al-acc .bt-2.hecho::before,.b-tr .p .acc .bt-2.hecho::before{
  content:'✓';order:2;margin-left:9px;font-size:13px;line-height:1;
  position:static;}

/* ─── El velo también en el diario ─────────────────────────── */
/* Ojo: en las tres tarjetas pequeñas el <a> envuelve la tarjeta
   entera, así que un velo ahí taparía el texto. Solo la destacada,
   donde el enlace lleva únicamente la imagen. En las otras basta el
   filtro, que va sobre el <img>. */
.b-bl .dest a{display:block;position:relative;overflow:hidden;}
.b-bl .dest a::after{content:'';position:absolute;inset:0;
  pointer-events:none;background:var(--portada);mix-blend-mode:screen;
  opacity:var(--foto-velo);transition:opacity var(--d-corta) var(--e-suave);}
.b-bl .dest a:hover::after{opacity:calc(var(--foto-velo) * .45);}

/* ─── Las cifras, en dos por dos ───────────────────────────── */
/* Cuatro filas de ancho completo dejaban la mitad derecha vacía y
   obligaban a bajar cuatro pantallas. En dos por dos, cada dato es
   un rectángulo y los cuatro se ven de una vez. */
.b-cg ol{display:grid;grid-template-columns:1fr 1fr;
  border-top:0;border-left:var(--bd) solid var(--ln-1);
  border-top:var(--bd) solid var(--ln-1);}
.b-cg li{grid-template-columns:clamp(96px,8vw,158px) 1fr;align-items:start;
  gap:clamp(20px,2.4vw,38px);
  padding:clamp(30px,3.4vw,52px) clamp(26px,3vw,46px);
  border-bottom:var(--bd) solid var(--ln-1);
  border-right:var(--bd) solid var(--ln-1);}
.b-cg li:hover{padding-left:clamp(26px,3vw,46px);
  background:color-mix(in srgb,var(--ac) 4%,transparent);}
/* La etiqueta de la derecha ya no cabe en su columna: pasa a ser un
   sobretítulo encima del nombre, que es donde se lee mejor. */
.b-cg li .anio{grid-column:2;grid-row:1;justify-self:start;
  align-self:start;margin-bottom:9px;color:var(--ac-tx);opacity:.75;}
.b-cg li > div{grid-column:2;grid-row:2;}
.b-cg .v{grid-row:1 / span 2;font-size:clamp(42px,5vw,88px);
  line-height:.82;}
.b-cg p{max-width:38ch;}
@media(max-width:900px){
  .b-cg ol{grid-template-columns:1fr;}
  .b-cg li{grid-template-columns:auto 1fr;}
  .b-cg li .anio{display:block;}
}
@media(max-width:520px){
  .b-cg li{grid-template-columns:1fr;gap:14px;}
  .b-cg .v{grid-row:auto;grid-column:1;}
  .b-cg li .anio,.b-cg li > div{grid-column:1;grid-row:auto;}
}

/* ─── La comparativa, con azul de detalle ──────────────────── */
/* Azul en el filete, en la cabecera, en los sí y en la columna
   destacada. Nunca en el fondo entero: una tabla con color de lado a
   lado se lee peor, no mejor. */
.b-cmp .caja{border-color:var(--ln-3);}
.b-cmp table{min-width:760px;width:100%;}
.b-cmp thead th{background:color-mix(in srgb,var(--ac) 7%,var(--sup-1));
  color:var(--ac-tx);border-bottom:1px solid var(--ln-3);padding-block:20px;}
.b-cmp thead th.dest{background:color-mix(in srgb,var(--ac) 14%,var(--sup-1));
  color:var(--ac-tx);font-weight:700;}
.b-cmp thead th.esq{width:26%;}
.b-cmp thead th.esq .mono{width:52px;height:30px;color:var(--ac-tx);opacity:.85;}
.b-cmp td.dest{background:color-mix(in srgb,var(--ac) 5%,var(--sup-1));}
.b-cmp tbody tr:hover th,.b-cmp tbody tr:hover td{
  background:color-mix(in srgb,var(--ac) 4%,transparent);}
.b-cmp tbody tr:hover td.dest{
  background:color-mix(in srgb,var(--ac) 9%,var(--sup-1));}
/* ARREGLO: el visto y su texto salían uno encima del otro. El SVG
   hereda `display:block` del reinicio, así que dentro de la celda
   hay que ponerlos en una misma caja en fila. */
.b-cmp .mrc{display:inline-flex;align-items:center;gap:9px;}
.b-cmp .mrc b{font-weight:400;}
.b-cmp .si .mrc svg{stroke:var(--ac);}
.b-cmp .no .mrc svg{stroke:var(--tx-3);}
.b-cmp svg{flex:none;width:15px;height:15px;vertical-align:0;}
@media(max-width:820px){.b-cmp thead th.esq .mono{display:none;}}

/* ─── Garantías con la imagen quieta (bloque 37) ───────────── */
/* El bloque trae un hueco `.ph`; aquí va foto de verdad. */
.b-sf .fija .im{position:relative;overflow:hidden;border:var(--bd) solid var(--ln-1);}
.b-sf .fija .im img{width:100%;height:100%;object-fit:cover;display:block;
  border:0;border-radius:0;}
.b-sf .fija .rotulo span:last-child{font-variant-numeric:tabular-nums;color:var(--tx-2);}
/* La cifra de cada garantía se enciende al llegar a ella. */
.b-sf li{transition:opacity .6s var(--e-suave);}
.b-sf .n{transition:color var(--d-corta) var(--e-suave),
                    transform .5s var(--e-salida);}
.b-sf li:hover .n{transform:translateX(3px);}
.b-sf .tags .chip{transition:border-color var(--d-corta) var(--e-suave),
                             color var(--d-corta) var(--e-suave);}
.b-sf li:hover .tags .chip{border-color:var(--ln-3);color:var(--tx-1);}
@media(max-width:900px){.b-sf .fija .im{max-height:52vh;}}

/* ─── Cinta de garantías: puntos en vez de logotipos ───────── */
.b-mq .lg{display:flex;align-items:center;gap:clamp(40px,6vw,90px);
  font-size:clamp(15px,1.5vw,19px);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);font-family:var(--f-txt);font-weight:500;
  color:var(--tx-2);}
.b-mq .lg::after{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--ac);flex:none;}
.b-mq .lg:hover{color:var(--tx-1);}

/* ─── Cabecera de la tienda ────────────────────────────────── */
.al-intro{padding:calc(var(--sec-y) * .7) var(--mx) 0;}
.al-intro h1{font-family:var(--f-tit);font-weight:var(--pe-tit);font-size:var(--t-xl);
  letter-spacing:var(--tr-tit);line-height:1;margin:18px 0 0;}
.al-intro .txt{margin-top:20px;}
.al-intro .eti{margin-bottom:0;}

/* ─── Ancho de la web ──────────────────────────────────────── */
/* Fotografía a sangre, texto a medida de lectura. Una línea de
   texto de 200 caracteres no se lee: se abandona. Por eso solo
   crece el contenedor ancho (rejillas, galerías, portada) y el
   estrecho se queda donde estaba. */
:root{--mx:clamp(17px,3vw,58px);}
[data-piel="lujo-claro"]{--ancho-a:1840px;}
.b-cab1 .in{max-width:1840px;}
/* En pantallas muy anchas, cinco columnas en vez de cuatro
   gigantes: la ficha de producto tiene un tamaño natural. */
@media(min-width:1700px){
  .b-tr .rejilla{grid-template-columns:repeat(5,1fr);}
  .al-rel .rejilla{grid-template-columns:repeat(4,1fr);}
}

/* ─── El botón, con la piel sin color de marca ─────────────── */
/* El gesto «relleno» mezcla el acento con el texto para subir el
   color. Aquí acento y texto son el mismo negro, así que la mezcla
   sería invisible: lo que sube es el marfil y el botón se invierte. */
[data-gesto="relleno"] .bt::before{background:var(--sup-1);}
[data-gesto="relleno"] .bt{transition:color var(--d-corta) var(--e-suave),
  border-color var(--d-corta) var(--e-suave);}
[data-gesto="relleno"] .bt:hover{color:var(--tx-1);border-color:var(--ac-bt);}
/* El halo de la sección de cierre latía en color; en tinta se
   ensucia. Se queda en un aliento de arena. */
.b-cm .mv-halo{opacity:.5;}

/* ─── Más azul: los titulares en azul-negro ────────────────── */
/* La web era azul en el acento y negra en el texto. Los titulares
   pasan a un azul-negro (#141B3D): a tamaño grande se lee azul, a
   tamaño pequeño se lee negro, y la página entera se unifica sin
   perder ni un punto de contraste (14,9:1 sobre blanco).
   El titular de la portada NO entra: ese sigue en tinta hasta que se
   decida. */
:root{--tx-tit:#141B3D;}
h2.t-xl,h2.t-lg,.al-intro h1,
.b-mr .frase,.b-cg .v,.b-cg h3,.b-sf h3,.b-cmp tbody th,
.b-ph h3,.b-tr .p h3,.b-cat .c h3,.b-be h2,.b-bl h3,.b-bl h4,
.b-fpr h1,.b-faq button,.b-cm h2,.al-panel .mega .fams a,
.b-art h1,.b-lg .texto h1,.b-404 h1,.b-bl .meta .cat,
.b-pie .marca,.al-cuadro .al-firma .quien b{color:var(--tx-tit);}
.b-h2 h1{color:var(--tx-1);}
/* El precio y las cifras, también: son titulares con números. */
.b-tr .p .pr b,.b-fpr .precio b,.b-ph .n{color:var(--tx-tit);}

/* ─── El segundo botón de la portada, en blanco ────────────── */
/* Sobre la arena, un botón de borde solo desaparecía. En blanco
   macizo hace pareja con el azul y se lee a la primera. */
.b-h2 .al-blanco{background:var(--sup-1);border-color:var(--sup-1);
  color:var(--tx-tit);}
/* El destello del gesto, en el botón blanco, va en azul: sobre
   blanco un destello blanco no existe. */
[data-gesto="brillo"] .b-h2 .al-blanco::before{
  background:linear-gradient(115deg,transparent 22%,
    color-mix(in srgb,var(--ac) 16%,transparent) 50%,transparent 78%);
  transform:translateX(-115%);}
[data-gesto="brillo"] .b-h2 .al-blanco:hover::before{transform:translateX(115%);}
[data-gesto="brillo"] .b-h2 .al-blanco:hover{color:var(--ac-tx);
  background:var(--sup-1);border-color:var(--sup-1);}

/* ─── Mayúsculas: dónde sí y dónde no ──────────────────────── */
/* La piel pone los titulares en mayúsculas. Eso vale para un rótulo
   de sección, no para un párrafo largo ni para el nombre de una
   pieza: ahí se lee peor y ocupa el doble. */
.b-mr .frase,.b-ph h3,.b-cg h3,.b-bl h3,.b-bl h4,.b-fpr h1,.b-tr .p h3,
.b-cat h3,.b-faq button,.b-cmp tbody th{text-transform:none;}
.b-mr .frase{letter-spacing:-.005em;}

/* Ningún titular pasa de dos líneas. Con una display en mayúsculas
   eso no sale solo: hay que darle medida a cada uno. */
.b-hc h1{max-width:20ch;font-size:clamp(34px,6.3vw,96px);}
.b-cm h2{max-width:23ch;font-size:clamp(30px,4.9vw,72px);}
.b-mr .frase{max-width:22ch;font-size:clamp(26px,4vw,58px);}
.b-faq h2{max-width:15ch;}
.b-fpr h1{font-size:clamp(23px,2.5vw,37px);line-height:1.12;}
.b-tr .p h3{font-size:clamp(15px,1.3vw,19px);line-height:1.3;}
.b-ph h3{font-size:clamp(16px,1.4vw,21px);}

/* ─── Cinta de garantías: un filete, no una franja ─────────── */
/* Iba con el aire de una sección entera y ocupaba un tercio de
   pantalla para decir seis palabras. */
.b-mq{padding:0;background:var(--sup-2);border-block:var(--bd) solid var(--ln-1);}
.b-mq .cinta{align-items:center;}
.b-mq .grupo{gap:clamp(26px,3.4vw,58px);padding-right:clamp(26px,3.4vw,58px);}
.b-mq .lg{height:54px;font-size:10.5px;letter-spacing:3.4px;}
.b-mq .lg::after{width:4px;height:4px;}

/* ─── Rejilla de tienda al aire ────────────────────────────── */
/* Sin caja ni sombra: la foto se apoya en el fondo y la ficha
   respira. La acción aparece al acercarse, y en táctil siempre. */
.b-tr .p{background:none;border:0;box-shadow:none;}
.b-tr .p:hover{background:none;border:0;box-shadow:none;transform:none;}
.b-tr .p .foto{background:var(--sup-2);border:var(--bd) solid var(--ln-1);}
.b-tr .p .dat{padding:18px 0 0;gap:6px;}
.b-tr .p .acc{padding:14px 0 0;}
.b-tr .rejilla{gap:calc(var(--gap) * 1.9) var(--gap);}

/* ─── Numeración de secciones ──────────────────────────────── */
/* El número no es decoración: da orden de lectura y hace que una
   portada larga se recorra como un índice. */
.eti.num::before{margin-right:2px;}
.eti.num{color:var(--tx-2);}

/* ─── Remates de composición ───────────────────────────────── */
/* En pantalla ancha, la etiqueta vertical «Desliza» de la portada
   caía encima del segundo botón. */
@media(min-width:901px){.b-hc .bajo{padding-right:76px;}}
/* El precio de la selección no debe partirse en dos líneas. */
.b-ph .n{white-space:nowrap;}
/* Cuatro pilares caben, pero con el titular un paso más abajo. */
.b-sv1 .tarjetas h3{font-size:var(--t-sm);}
.b-sv1 .tarjetas > article{padding:calc(var(--gap) * 1.45);}

/* «Nuestras favoritas», en una sola línea. El bloque trae una
   medida de 14ch que la parte en dos; aquí manda el ancho de la
   sección y el tamaño se ajusta solo. */
.b-ph .cabe h2{max-width:none;white-space:nowrap;
  font-size:clamp(24px,3.4vw,64px);}

/* La selección horizontal, escalonada: dos alturas en vez de una
   fila plana. Solo cuando de verdad va de lado. */
.b-ph:not(.mv-hz-plano) [data-hz-pista] article:nth-child(even){
  margin-top:clamp(22px,5vw,78px);}
.b-ph article a{display:block;}

/* La tarjeta de producto responde entera, no solo la foto. */
.b-tr .p h3 a{transition:color var(--d-corta) var(--e-suave);}
.b-tr .p:hover h3 a{color:var(--ac-tx);}

/* El diario con fotografía real */
.b-bl img{width:100%;object-fit:cover;border-radius:var(--r-img);
  transition:filter var(--d-corta) var(--e-suave);}
.b-bl article:hover img{filter:brightness(1.04);}
.b-bl .dest .txt{margin-top:0;}

/* La comparativa: primera columna fija al desplazarla en móvil */
.b-cmp tbody th{background:var(--sup-1);position:sticky;left:0;}
.b-cmp thead th:first-child{background:var(--sup-3);position:sticky;left:0;}

/* ─── Barra de compra en móvil ─────────────────────────────── */
/* En el teléfono el botón de compra queda a dos pantallas de scroll.
   Esta barra lo devuelve al pulgar sin repetir la ficha. */
.al-barra{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  align-items:center;gap:14px;padding:12px var(--mx);
  background:color-mix(in srgb,var(--sup-1) 94%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:var(--bd) solid var(--ln-2);}
.al-barra .dato{display:flex;flex-direction:column;gap:2px;min-width:0;}
/* Ojo: sin acotar a .dato, este selector alcanzaba la etiqueta que el
   motor mete dentro del botón y la pintaba del color del texto menor
   sobre el marrón del botón. */
.al-barra .dato span{font-size:var(--t-mic);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.al-barra .dato b{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:var(--t-sm);letter-spacing:var(--tr-tit);line-height:1;color:var(--tx-1);}
.al-barra .bt{flex:1;white-space:nowrap;}
@media(max-width:700px){.al-barra{display:flex;} body:has(.al-barra){padding-bottom:78px;}}

/* ─── Sinergia: un solo tratamiento para toda la fotografía ─── */
/* El vídeo de portada es la referencia de la web: crema, cálido, de
   contraste bajo, como visto a través de un velo blanco. Las fotos
   venían de sitios distintos —fondos negros, verdes, azules, blancos
   de estudio— y cada sección parecía de otra marca. Este bloque las
   lleva a todas al mismo sitio. Se aplica solo a <img>: los vídeos
   YA son la referencia y no se tocan.
   Dos capas:
     1. El filtro: baja la saturación, vira a cálido con un punto de
        sepia y afloja el contraste. Es lo que iguala la temperatura.
     2. El velo: crema en modo «screen», que levanta las sombras sin
        ensuciar los blancos. Es la «capa de opacidad blanca».
   Los valores salen de comparar cuatro tandas sobre las fotos reales;
   más sepia empieza a comerse el oro y más velo apaga la pieza. */
:root{
  --foto-fil:saturate(.58) sepia(.30) contrast(.90) brightness(1.06);
  --foto-velo:.18;
}
.b-cat .c .im img,
.b-ph .img img,
.b-tr .p .foto img,
.b-gp figure img,
.b-be .im:not(.marca) img,
.b-sf .fija .im img,
.b-fpr .grande img,
.b-fpr .apoyo img,
.b-bl img{filter:var(--foto-fil);}

/* El velo. Va en ::after del marco de la foto, nunca del artículo,
   para no pasar por encima del texto. */
.b-ph .img,.b-fpr .grande{position:relative;}
.b-cat .c .im:not(:has(video))::after,
.b-ph .img::after,
.b-tr .p .foto::after,
.b-gp figure::after,
.b-be .im:not(.marca)::after,
.b-sf .fija .im::after,
.b-fpr .grande::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:var(--portada);mix-blend-mode:screen;opacity:var(--foto-velo);}
/* El pie de la galería y el distintivo de oferta, por encima del velo. */
.b-gp figcaption{z-index:2;}
.b-tr .p .dist,.b-fpr .grande .dist{z-index:3;}
/* El interior de tienda es una foto de banco, más honda que el resto:
   un punto más de velo y de luz para que entre en la familia. */
.b-be .im:not(.marca) img{filter:var(--foto-fil) brightness(1.11);}
.b-be .im:not(.marca)::after{opacity:.24;}
/* Al pasar por encima, el velo se retira un poco: la pieza se ve tal
   cual justo cuando se la está mirando. */
.b-cat .c:hover .im:not(:has(video))::after,
.b-ph article:hover .img::after,
.b-tr .p:hover .foto::after,
.b-gp figure:hover::after{opacity:calc(var(--foto-velo) * .45);}
.b-cat .c .im:not(:has(video))::after,.b-ph .img::after,.b-tr .p .foto::after,
.b-gp figure::after{transition:opacity var(--d-corta) var(--e-suave);}
/* Quien pida menos movimiento no pide menos color: el velo se queda. */

/* ─── El cierre, a todo el ancho ────────────────────────────── */
/* Seguía con las medidas del bloque —23ch de titular, 44ch de texto
   y 560 px de cinta— mientras el resto de la página ya iba a 1840.
   Ahora ocupa lo mismo que sus vecinas: sigue centrado, pero deja
   de ser una isla estrecha al final del recorrido. El titular pasa
   a una sola línea de 768 px en adelante. */
.b-cm{padding-inline:var(--mx);}
.b-cm > *{width:100%;max-width:var(--ancho-a);margin-inline:auto;}
.b-cm h2{max-width:none;font-size:clamp(32px,5.6vw,104px);line-height:1.02;}
.b-cm .txt{max-width:62ch;font-size:clamp(15px,1.15vw,19px);}
.b-cm .eti.sin{width:100%;}
.b-cm .acc{margin-top:clamp(34px,4vw,54px);}
.b-cm .pie{width:100%;max-width:var(--ancho-a);
  gap:clamp(28px,5vw,90px);margin-top:clamp(46px,6vw,78px);
  padding-top:clamp(22px,2.4vw,34px);}
.b-cm .pie span{font-size:var(--t-min);}

/* ─── La portada, más ancha hacia la derecha ────────────────── */
/* El vídeo NO se mueve ni un píxel: la retícula sigue siendo mitad
   y mitad, y el borde izquierdo del vídeo se queda clavado en el
   50 % (comprobado: 640 de 1280, 960 de 1920, 1280 de 2560).
   Lo que se ensancha es el texto DENTRO de su mitad: iba con una
   medida de 54ch cuando la columna daba para 880 px, y con 40 px
   de margen a la derecha que no hacían falta. */
.b-h2 .txt-l{padding-right:clamp(16px,1.4vw,28px);}
.b-h2 .txt{max-width:none;}

/* ═══ LAS PÁGINAS NUEVAS ═══════════════════════════════════════ */

/* ─── El diario: listado ───────────────────────────────────── */
.b-bl article > .im{display:block;position:relative;overflow:hidden;}
.b-bl article > .im img{width:100%;object-fit:cover;
  transition:transform 1.1s var(--e-salida);}
.b-bl article:hover > .im img{transform:scale(1.04);}
.b-bl article > .im::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--portada);mix-blend-mode:screen;opacity:var(--foto-velo);
  transition:opacity var(--d-corta) var(--e-suave);}
.b-bl article:hover > .im::after{opacity:calc(var(--foto-velo) * .45);}
.b-bl .rejilla{grid-template-columns:repeat(3,1fr);
  gap:calc(var(--gap) * 1.6) var(--gap);margin-top:calc(var(--gap) * 2);}
.b-bl .rejilla article > div{padding-top:18px;}
.b-bl .meta{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--t-mic);
  letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);color:var(--tx-3);}
.b-bl .meta .cat{color:var(--ac-tx);}
.b-bl h3{margin-top:12px;line-height:1.28;}
.b-bl h3 a{transition:color var(--d-corta) var(--e-suave);}
.b-bl article:hover h3 a{color:var(--ac-tx);}
.b-bl .rejilla .txt{margin-top:10px;font-size:var(--t-min);}
@media(max-width:1080px){.b-bl .rejilla{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.b-bl .rejilla{grid-template-columns:1fr;}}

/* ─── El diario: la guía ───────────────────────────────────── */
/* Un texto de cuatro mil palabras necesita dos cosas: medida de
   lectura corta y saber dónde estás. Lo primero lo trae el bloque
   26; lo segundo es el índice pegajoso de la izquierda. */
.b-art .cabecera{max-width:840px;}
.b-art h1{font-size:clamp(30px,3.7vw,58px);text-transform:none;line-height:1.1;}
.al-portada{max-width:var(--ancho-a);margin:clamp(34px,4vw,56px) auto 0;
  position:relative;overflow:hidden;}
.al-portada img{width:100%;object-fit:cover;filter:var(--foto-fil);}
.al-portada::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--portada);mix-blend-mode:screen;opacity:var(--foto-velo);}
.al-lectura{display:grid;grid-template-columns:236px minmax(0,68ch);
  gap:clamp(32px,5vw,84px);justify-content:center;
  margin-top:clamp(40px,5vw,72px);align-items:start;}
/* Ojo con la medida en `ch`: a 390 px, 68ch son seiscientos y pico
   píxeles y la página se desbordaba de lado. La columna se declara
   flexible y el tope de lectura va dentro. */
.al-lectura .cuerpo{margin:0;max-width:68ch;min-width:0;}
/* El bloque 26 centra el cuerpo con `margin:X auto 0`. En un
   contenedor normal eso no hace nada, pero como aquí es un elemento
   de retícula, el margen automático lo encoge a su contenido y se
   salía de la columna: 529 px dentro de una de 356. */
.al-indice{position:sticky;top:112px;}
.al-indice h2{font-size:var(--t-mic);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-3);margin-bottom:14px;font-weight:500;}
.al-indice a{display:block;padding:9px 0;font-size:var(--t-min);color:var(--tx-2);
  line-height:1.35;border-bottom:var(--bd) solid var(--ln-1);
  transition:color var(--d-corta) var(--e-suave),
             padding-left var(--d-corta) var(--e-suave);}
.al-indice a:hover{color:var(--ac-tx);padding-left:7px;}
.b-art .cuerpo h2{font-size:clamp(21px,1.9vw,30px);text-transform:none;
  color:var(--tx-tit);scroll-margin-top:110px;margin-top:58px;}
.b-art .cuerpo h3{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:clamp(17px,1.4vw,22px);letter-spacing:var(--tr-tit);
  color:var(--tx-tit);margin-top:38px;}
.b-art .cuerpo p a,.b-art .cuerpo li a{color:var(--ac-tx);
  border-bottom:1px solid var(--ln-3);
  transition:border-color var(--d-corta) var(--e-suave);}
.b-art .cuerpo p a:hover,.b-art .cuerpo li a:hover{border-color:var(--ac);}
.b-art .cuerpo strong{color:var(--tx-tit);font-weight:600;}
.b-art blockquote{border-left:0;padding:clamp(26px,3vw,42px) 0;
  margin:clamp(38px,4vw,60px) 0;border-top:var(--bd) solid var(--ln-2);
  border-bottom:var(--bd) solid var(--ln-2);
  font-size:clamp(19px,1.9vw,28px);line-height:1.3;color:var(--tx-tit);
  text-align:center;}
/* La tabla de cada guía, con el mismo azul de detalle que la
   comparativa de la portada: una sola gramática en toda la web. */
.al-tabla{margin:clamp(30px,3.4vw,46px) 0;overflow-x:auto;
  border:var(--bd) solid var(--ln-3);}
.al-tabla table{width:100%;min-width:520px;border-collapse:collapse;}
.al-tabla th,.al-tabla td{padding:14px 18px;text-align:left;
  font-size:var(--t-min);line-height:1.5;
  border-bottom:var(--bd) solid var(--ln-1);}
.al-tabla thead th{background:color-mix(in srgb,var(--ac) 7%,var(--sup-1));
  color:var(--ac-tx);font-size:var(--t-mic);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);font-weight:600;white-space:nowrap;
  border-bottom:1px solid var(--ln-3);}
.al-tabla td{color:var(--tx-2);}
.al-tabla td:first-child{color:var(--tx-tit);}
.al-tabla tbody tr:hover td{background:color-mix(in srgb,var(--ac) 4%,transparent);}
.al-tabla tbody tr:last-child td{border-bottom:0;}
@media(max-width:1080px){
  .al-lectura{grid-template-columns:minmax(0,1fr);}
  .al-indice{display:none;}
}

/* ─── La galería ───────────────────────────────────────────── */
.b-gal .it img{width:100%;height:100%;object-fit:cover;display:block;
  filter:var(--foto-fil);transition:transform .7s var(--e-suave);}
.b-gal .it{border:var(--bd) solid var(--ln-1);}
.b-gal .it::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--portada);mix-blend-mode:screen;opacity:var(--foto-velo);
  transition:opacity var(--d-corta) var(--e-suave);}
.b-gal .it:hover::before{opacity:calc(var(--foto-velo) * .45);}
.b-gal .it:hover img{transform:scale(1.04);}
.b-gal .it figcaption{z-index:2;font-family:var(--f-tit);
  letter-spacing:var(--tr-tit);color:var(--tx-tit);}
.b-gal .a img{aspect-ratio:16/10;} .b-gal .b img{aspect-ratio:4/5;}
.b-gal .c img,.b-gal .d img,.b-gal .e img{aspect-ratio:1/1;}
@media(max-width:800px){.b-gal .a img,.b-gal .b img{aspect-ratio:1/1;}}

/* ─── Contacto ─────────────────────────────────────────────── */
.b-frm h2{font-size:clamp(25px,2.7vw,42px);max-width:none;}
.b-frm .contact__form{align-content:start;}
.b-frm .priv span{line-height:1.5;}
.b-loc .mapa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:var(--foto-fil);}
.b-loc .mapa::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--portada);mix-blend-mode:screen;opacity:var(--foto-velo);}
.b-loc .info{background:var(--sup-2);}
.b-loc .hor li span{color:var(--tx-2);}

/* ─── La cesta y el pedido ─────────────────────────────────── */
/* El marcado lo pinta el app.js del cliente; esto es solo su ropa. */
.al-cesta,.al-checkout{padding:calc(var(--sec-y) * .5) var(--mx) var(--sec-y);}
.cartbox table{width:100%;border-collapse:collapse;}
.cartbox th,.cartbox td{padding:18px 14px;text-align:left;
  border-bottom:var(--bd) solid var(--ln-1);font-size:var(--t-min);
  color:var(--tx-2);vertical-align:middle;}
.cartbox thead th{font-size:var(--t-mic);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--ac-tx);font-weight:600;
  border-bottom:1px solid var(--ln-3);
  background:color-mix(in srgb,var(--ac) 6%,var(--sup-1));}
.cartbox td:first-child{padding-left:18px;}
.cartbox .ci{display:flex;align-items:center;gap:16px;}
.cartbox .ci img{width:74px;height:74px;object-fit:cover;flex:none;
  border:var(--bd) solid var(--ln-1);filter:var(--foto-fil);}
.cartbox .ci a{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:var(--t-sm);letter-spacing:var(--tr-tit);color:var(--tx-tit);
  transition:color var(--d-corta) var(--e-suave);}
.cartbox .ci a:hover{color:var(--ac-tx);}
.cartbox .qty{display:inline-flex;align-items:center;
  border:var(--bd) solid var(--ln-2);}
.cartbox .cq{width:38px;height:42px;color:var(--tx-2);font-size:15px;
  transition:color var(--d-corta) var(--e-suave),
             background var(--d-corta) var(--e-suave);}
.cartbox .cq:hover{color:var(--ac-txt);background:var(--ac-bt);}
.cartbox .cqi{width:44px;height:42px;text-align:center;border:0;
  border-inline:var(--bd) solid var(--ln-1);background:none;
  font-variant-numeric:tabular-nums;color:var(--tx-tit);}
.cartbox .cart-x{width:36px;height:36px;color:var(--tx-3);font-size:17px;
  border:var(--bd) solid transparent;
  transition:color var(--d-corta) var(--e-suave),
             border-color var(--d-corta) var(--e-suave);}
.cartbox .cart-x:hover{color:var(--ac-tx);border-color:var(--ln-2);}
.cartbox .cart-foot{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-top:28px;}
.cartbox .cart-total{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:var(--t-md);letter-spacing:var(--tr-tit);color:var(--tx-tit);
  font-variant-numeric:tabular-nums;}
.cartbox .cart-foot > a:first-child{font-size:var(--t-mic);
  letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);color:var(--tx-2);}
.cartbox .cart-foot > a:first-child:hover{color:var(--ac-tx);}
.cartbox .cart-vacia{text-align:center;padding:clamp(50px,8vh,110px) 0;
  border-block:var(--bd) solid var(--ln-1);}
.cartbox .cart-vacia p{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:var(--t-md);letter-spacing:var(--tr-tit);color:var(--tx-tit);
  margin-bottom:26px;}
.cartbox.mini table{font-size:var(--t-mic);}
.cartbox.mini .ci img{width:52px;height:52px;}
.cartbox.mini thead,.cartbox.mini .cart-x,.cartbox.mini .qty{display:none;}
.cartbox.mini td{padding:12px 0;}
.cartbox.mini .cart-foot{flex-direction:column;align-items:stretch;gap:14px;}
.cartbox.mini .cart-foot .bt,.cartbox.mini .cart-foot > a:first-child{display:none;}

.al-checkout .par{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(34px,5vw,80px);align-items:start;}
.al-checkout form{display:grid;gap:22px;}
.al-checkout .dos{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.al-checkout h2{font-family:var(--f-tit);font-weight:var(--pe-tit);
  font-size:var(--t-sm);letter-spacing:var(--tr-eti);text-transform:var(--tt-eti);
  color:var(--tx-3);}
.al-checkout .campo i{font-style:normal;color:var(--tx-3);text-transform:none;
  letter-spacing:0;}
.al-checkout .pago{font-size:var(--t-min);color:var(--tx-2);
  border-left:2px solid var(--ac);padding-left:18px;line-height:1.6;}
.al-checkout .resumen{background:var(--sup-2);
  border:var(--bd) solid var(--ln-1);padding:clamp(24px,2.6vw,38px);
  position:sticky;top:112px;}
.al-checkout .garantias{margin-top:24px;padding-top:20px;
  border-top:var(--bd) solid var(--ln-1);}
.al-checkout .garantias li{position:relative;padding:8px 0 8px 20px;
  font-size:var(--t-min);color:var(--tx-2);}
.al-checkout .garantias li::before{content:'';position:absolute;left:0;top:1.05em;
  width:5px;height:5px;border-radius:50%;background:var(--ac);}
@media(max-width:900px){
  .al-checkout .par{grid-template-columns:1fr;}
  .al-checkout .resumen{position:static;}
  .al-checkout .dos{grid-template-columns:1fr;}
  .cartbox thead{display:none;}
  .cartbox td{display:block;border:0;padding:6px 0;}
  .cartbox tbody tr{display:block;padding:18px 0;
    border-bottom:var(--bd) solid var(--ln-1);}
}

/* ─── Legales y 404 ────────────────────────────────────────── */
.b-lg .texto h1{font-size:clamp(26px,3vw,44px);}
.b-lg .texto ul{margin:4px 0 16px;}
.b-lg .aviso{border-radius:0;}
.b-lg mark{background:color-mix(in srgb,#E9B949 34%,transparent);
  color:var(--tx-1);padding:1px 4px;}
.b-lg code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.92em;background:var(--sup-2);padding:2px 6px;
  border:var(--bd) solid var(--ln-1);}
.b-404 .cifra{color:var(--ac);opacity:.13;}
.b-404 h1{text-transform:none;}
.b-404 .atajos{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(38px,5vh,64px);padding-top:24px;
  border-top:var(--bd) solid var(--ln-1);width:min(520px,100%);}
.b-404 .atajos a{font-size:var(--t-mic);letter-spacing:var(--tr-eti);
  text-transform:var(--tt-eti);color:var(--tx-2);
  transition:color var(--d-corta) var(--e-suave);}
.b-404 .atajos a:hover{color:var(--ac-tx);}

/* ─── Piezas relacionadas ──────────────────────────────────── */
.al-rel{padding-top:0;}
.al-rel .rejilla{grid-template-columns:repeat(4,1fr);}
@media(max-width:820px){.al-rel .rejilla{grid-template-columns:repeat(2,1fr);}}