/* ============================================================================
   FICHA DE MODELO · /modelos/<slug>   (la carga solo la página de cada modelo)

   La ficha en grande que antes se abría como diálogo encima del home (#modelo/<slug>) ahora ES la
   página del modelo: una sola versión, una sola URL. Estos son sus estilos, mudados de
   la-decima.html, más lo que la vuelve página:
     · bajo el cajetín del sitio, la TIRA de modelos a escala (la barra del catálogo del home),
       con la ✕ que regresa al catálogo;
     · las FOTOS, pegadas bajo las barras: lupa, flechas, regla y cuenta;
     · al bajar, la lámina del PLANO se desliza sobre la foto y se dibuja;
     · debajo, «MÁS INFORMACIÓN» (un <details>);
     · y abajo, siempre a la vista, el CAJETÍN del modelo.
   El comportamiento va en ficha.js. Sin JS todo se lee en fila: fotos, planos y texto.
   ========================================================================== */
:root{
  --lona:#E8D9BB;
  --mano:"Caveat",cursive;     /* la letra a mano del home (rótulo de la tira, nota del modelo) */
  /* cursor «ver de cerca»: la misma lupa del home (aro naranja y mango de madera perfilados en café) */
  --cur-lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none' stroke-linecap='round'%3E%3Cpath d='M22.6 22.6L31 31' stroke='%2343341F' stroke-width='6.4'/%3E%3Cpath d='M24.4 24.4L31 31' stroke='%238A6A44' stroke-width='3.4'/%3E%3Ccircle cx='15' cy='15' r='10.5' stroke='%2343341F' stroke-width='4.6'/%3E%3Ccircle cx='15' cy='15' r='10.5' stroke='%23F39225' stroke-width='2.2'/%3E%3C/svg%3E") 15 15,zoom-in;
}
/* la página acaba en el cajetín del modelo (sin pie de página: la ficha del home no lo tenía). Con «Más
   información» cerrado puede medir menos que la pantalla (celular): el cajetín baja hasta el fondo en vez
   de dejar papel en blanco debajo de él */
.pg-modelo{--caj-h:104px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
/* sin zoom de doble toque (la lupa y la regla se tocan seguido: el iPhone agrandaba la página); el zoom con
   dos dedos sigue igual */
.pg-modelo{touch-action:manipulation}
.pg-modelo > main{flex:1 0 auto;display:flex;flex-direction:column;min-width:0}
.pg-modelo > main > .mcaj{margin-top:auto}
/* OTRO MODELO (ficha.js, cambia): un paso de hoja con View Transition. La barra, la tira y el cajetín llevan
   nombre y se quedan quietos (el cajetín cambia sus datos en su lugar); lo demás es la hoja: al siguiente,
   la nueva sube desde abajo por encima de la vieja, que se hunde tantito; al de antes, la vieja se va hacia
   abajo y deja ver la nueva, que estaba debajo. Nunca se ve el fondo */
html.vt-paso .top__bar{view-transition-name:barra}
html.vt-paso .tira{view-transition-name:tira}
html.vt-paso .mcaj{view-transition-name:cajetin}
html.vt-paso::view-transition-image-pair(root){isolation:auto}
/* la hoja empieza bajo la tira (--pega) y acaba en el cajetín (--vt-abajo, ficha.js): lo que queda debajo
   de las barras (el pie de las fotos si se iba en el plano, el principio del plano bajo el cajetín) no viaja
   con ella */
html.vt-paso::view-transition-old(root),html.vt-paso::view-transition-new(root){
  mix-blend-mode:normal;clip-path:inset(var(--pega,0px) 0 var(--vt-abajo,0px) 0);
  animation-duration:.52s;animation-timing-function:cubic-bezier(.22,.8,.2,1);animation-fill-mode:both;
}
html.vt-paso[data-paso="sig"]::view-transition-old(root){animation-name:hoja-hunde}
html.vt-paso[data-paso="sig"]::view-transition-new(root){animation-name:hoja-sube}
html.vt-paso[data-paso="ant"]::view-transition-old(root){animation-name:hoja-baja;z-index:1}
html.vt-paso[data-paso="ant"]::view-transition-new(root){animation-name:hoja-emerge}
/* de una silueta de la tira: la hoja nueva sale de ella (--sale-*, ficha.js salida) y crece hasta su lugar */
html.vt-paso[data-paso="sale"]::view-transition-old(root){animation-name:hoja-hunde}
html.vt-paso[data-paso="sale"]::view-transition-new(root){animation-name:hoja-sale;animation-duration:.6s;transform-origin:0 0}
@keyframes hoja-sale{
  from{transform:translate(var(--sale-x,0px),var(--sale-y,0px)) scale(var(--sale-s,.1));opacity:0}
  14%{opacity:1}
  to{transform:none;opacity:1}
}
@keyframes hoja-sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes hoja-baja{from{transform:none}to{transform:translateY(100%)}}
@keyframes hoja-hunde{from{transform:none;filter:none}to{transform:scale(.94);filter:brightness(.78)}}
@keyframes hoja-emerge{from{transform:scale(.94);filter:brightness(.78)}to{transform:none;filter:none}}
/* DENTRO DEL HOME (ficha.js, MARCO): la barra y la tira de modelos son las del home, que quedan encima del
   marco; aquí no se repiten. El scroll no se le pasa al home al llegar al fondo */
html.enmarcada{overscroll-behavior:contain}
html.enmarcada .top,html.enmarcada .tira,html.enmarcada .toldo,html.enmarcada .saltar{display:none!important}
/* el cajetín del sitio, delgado: el del catálogo del home (debajo va la tira) */
.top--slim .top__in{min-height:40px}
.top--slim .top__logo img{height:20px}
.top--slim .top__l{font-size:14px}
.top--slim .btn--wa{font-size:13.5px}
@media (max-width:860px){
  .top--slim .top__in{min-height:52px}
  .top--slim .top__logo img{height:24px}
  .top--slim .btn--wa{font-size:14px;padding:0 16px}
}
@media (max-width:374.5px){
  .top--slim .top__logo img{height:auto;max-height:24px}
  .top--slim .btn--wa{font-size:13px;padding:0 10px}
}
/* Del catálogo del home a la ficha: las dos barras de arriba llevan nombre en las dos páginas, así el
   navegador las deja quietas y lo de abajo se funde. El home pone .vt-modelo al salir y esta página al
   llegar (script del <head>). De regreso (✕, «atrás») no hay transición: el home vuelve en seco, tal como
   se dejó. Y de una ficha a otra no se cambia de página: ver «LA BARRA Y LA TIRA SON EL MARCO» en ficha.js */
html.vt-modelo .top__bar{view-transition-name:barra}
html.vt-modelo .tira{view-transition-name:tira}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* ---- TIRA DE MODELOS · calcada del dock del catálogo (la-decima.html, «DOCK DEL COMPARADOR») ---- */
.tira{position:sticky;top:42px;z-index:59;border-bottom:2.5px solid var(--ink);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tira__in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) 150px auto;align-items:center;gap:16px;padding-top:6px;padding-bottom:6px}
/* la ✕: salir de la ficha, de vuelta al catálogo (misma caja con sombra dura que los botones de la ficha) */
.tira__x{
  display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--ink);background:var(--bone);box-shadow:3px 3px 0 var(--ink);
  font-family:var(--mono);font-size:14px;line-height:1;text-decoration:none;color:var(--ink);
  transition:background .16s ease,color .16s ease,transform .12s ease,box-shadow .12s ease;
}
@media (hover:hover){.tira__x:hover{background:var(--bone-2);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}}
.tira__x:active{background:var(--ink);color:var(--bone);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
@media (pointer:coarse){.tira__x{width:44px;height:44px}}
.tira__hud,.tira__sel{font-family:var(--mano);font-size:17px;font-weight:600;line-height:1.05;white-space:nowrap}
.tira__hud{color:var(--muted)}
.tira__sel{justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 10px;align-items:baseline;min-width:0;width:100%}
.tira__sel > *{flex:none}
/* aire a la derecha para los rasgos de la letra a mano que se salen de su caja (la «e» final se cortaba); el margen negativo lo devuelve */
.tira__sel .nom{order:3;flex:0 0 calc(100% + .4em);min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:right;font-size:18px;font-weight:700;padding:.1em .4em .1em 0;margin:-.1em -.4em -.1em 0}
.tira__sel .dn{color:var(--muted)}
.tira__sel .dm{color:var(--orange-t)}
.tira__svg{display:flex;justify-content:center;min-width:0}
.tira__svg svg{display:block;width:100%;height:auto;max-height:60px;overflow:visible}
.tira .silu{outline:none}
.tira .silu .hit{fill:transparent;stroke:none}
.tira .silu .shape{stroke:rgba(var(--ink-rgb),.45);stroke-width:3;fill:rgba(var(--ink-rgb),0);transition:stroke .16s ease,fill .16s ease}
.tira .silu .plat{stroke:var(--ink);stroke-width:2.4;fill:none}
.tira .silu .ghost{stroke-dasharray:6 5}
.tira .silu text,.tira .humano text,.tira .silu .lead,.tira .tira__eje text{display:none}
.tira a:hover .shape{stroke:var(--ink)}
.tira a:focus-visible{outline:none}
.tira a:focus-visible .hit{stroke:var(--orange);stroke-width:3;stroke-dasharray:6 5}
.tira .silu.sel .shape{stroke:var(--orange);stroke-width:3.6;fill:rgba(var(--orange-rgb),.14)}
.tira .humano *{stroke:var(--ink);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tira .humano .hum-cabeza{fill:var(--bone)}
@media (max-width:1180px){.tira__hud{display:none} .tira__in{grid-template-columns:minmax(0,1fr) 150px auto}}
/* sin sticky arriba (tablet/celular), como el home: el cajetín se va con la página y la tira se queda */
@media (max-width:1023px){
  .pg-modelo .top{position:static}
  .tira{top:0}
}
/* tablet / celular: la tira no aprieta los doce modelos al ancho de la pantalla: los enseña casi al
   tamaño del comparador del home y se desliza de lado; el modelo de esta página llega al centro
   (paginas.js) y su nombre va estampado chiquito arriba a la izquierda, como sello sobre el plano */
@media (max-width:959.5px){
  .tira{--tira-h:clamp(64px,11.5vh,104px);--sello-aire:120px}
  .tira__in{grid-template-columns:minmax(0,1fr);padding-top:6px;padding-bottom:4px}
  .tira__svg{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;margin-left:calc(0px - var(--pad));margin-right:calc(0px - var(--pad))}
  .tira__svg::-webkit-scrollbar{display:none}
  .tira__svg svg{flex:none;width:auto;height:var(--tira-h);max-height:none}
  .tira__svg::before,.tira__svg::after{content:"";flex:none;width:calc(50vw - 60px)}
  .tira .humano *{stroke-width:2.1}
  .tira .silu .plat{stroke-width:1.8}
  .tira .silu .shape{stroke-width:2.3}
  .tira .silu.sel .shape{stroke-width:2.9}
  .tira__sel{
    position:absolute;left:10px;top:9px;z-index:1;pointer-events:none;
    display:grid;grid-template-columns:auto 1fr;gap:0 6px;width:max-content;max-width:min(260px,72vw);
    font-size:13px;line-height:1;color:var(--orange-t);
    padding:3px 7px 3px;border:1.5px solid currentColor;border-radius:3px 2px 4px 2px;
    background:rgba(255,254,249,.92);box-shadow:inset 0 0 0 1px rgba(var(--orange-rgb),.22);
    transform:rotate(-2.5deg);
  }
  .tira__sel .nom{order:0;grid-column:1 / -1;text-align:left;font-size:16px;padding:0 .3em 0 0;margin:0 -.3em 0 0}
  .tira__sel > .dn,.tira__sel > .dm{order:1;color:inherit}
  .tira__x{position:absolute;right:10px;top:9px;z-index:2;width:36px;height:36px}
  .tira__sel .dn{opacity:.72}
}

/* ============ LA FICHA ============ */
.ficha{position:relative;background:var(--bone);color:var(--ink);padding:0;border:0}   /* (paginas.css usa .ficha para las tarjetas de contacto: aquí no lleva su relleno ni sus líneas) */
.ficha button{font:inherit;color:inherit;appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;cursor:pointer}
.ficha__scroll{position:relative}
.ficha a.fc-baja{text-decoration:none}
.fc-paso,.fc-cerrar{min-height:38px;display:grid;place-items:center;transition:background .16s ease,color .16s ease}

/* FOTOS · una pista horizontal con snap (en touch desliza nativo); se quedan pegadas bajo las barras
   mientras la lámina del plano les pasa por encima. Su alto (--fh) es lo que queda entre las barras de
   arriba y el cajetín de abajo: lo mide ficha.js */
.fc-fotos{position:relative;height:70vh;background:var(--ink);overflow:hidden}
.con-ficha .fc-fotos{position:sticky;top:var(--pega,106px);height:var(--fh,70vh)}
.fc-fotos::after{content:"";position:absolute;inset:0;z-index:6;background:var(--ink);opacity:var(--tapa,0);pointer-events:none}
.fc-pista{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.fc-pista::-webkit-scrollbar{display:none}
.fc-foto{position:relative;flex:0 0 100%;height:100%;margin:0;overflow:hidden;scroll-snap-align:center;scroll-snap-stop:always}
.fc-foto img{position:relative;z-index:1;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .4s ease}
.fc-foto img.ok{opacity:1}
/* una foto de otra proporción que la ventana no se mutila: va entera sobre su propio desenfoque */
.fc-foto.is-entera img{object-fit:contain}
.fc-foto.is-entera::before{content:"";position:absolute;inset:-48px;background:var(--fondo) center/cover no-repeat;filter:blur(30px) brightness(.62)}
html:not(.js) .fc-foto img{opacity:1}
.ficha .fc-fl{
  position:absolute;top:50%;z-index:7;width:44px;height:44px;margin-top:-22px;border-radius:50%;
  display:grid;place-items:center;color:var(--papel);font-family:var(--mono);font-size:16px;line-height:1;
  background:radial-gradient(circle at 50% 50%,transparent 0 5px,rgba(var(--ink-rgb),.16) 5px 6px,transparent 6px 10px,rgba(var(--ink-rgb),.14) 10px 11px,transparent 11px 15px,rgba(var(--ink-rgb),.12) 15px 16px,transparent 16px),#8A6A44;
  box-shadow:0 3px 0 rgba(var(--ink-rgb),.45);
  transition:background .2s ease,transform .15s ease,box-shadow .15s ease,opacity .25s ease;
}
.fc-fl--ant{left:clamp(12px,2.2vw,26px)}
.fc-fl--sig{right:clamp(12px,2.2vw,26px)}
/* el clic de cambiar foto no es solo el botón: alrededor de cada flecha hay un círculo más grande
   (el ::before, parte del botón) que también pasa de foto y enciende la flecha. Ahí no hay lupa: el
   clic ya no le llega a la pista y, si venía abierta, se guarda al entrar (pointerleave de la pista).
   Con los 44 px pelones, un clic que caía tantito afuera sacaba la lupa en vez de cambiar de imagen.
   Solo con mouse: en touch las flechas ni salen, la foto se desliza y la lupa se toca en cualquier lado. */
@media (hover:hover) and (pointer:fine){
  .ficha .fc-fl::before{content:"";position:absolute;inset:-38px;border-radius:50%}
}
@media (hover:hover){
  .ficha .fc-fl:hover{
    color:#fff;transform:translateY(-1px);box-shadow:0 4px 0 rgba(var(--ink-rgb),.45);
    background:radial-gradient(circle at 50% 50%,transparent 0 5px,rgba(var(--ink-rgb),.2) 5px 6px,transparent 6px 10px,rgba(var(--ink-rgb),.18) 10px 11px,transparent 11px 15px,rgba(var(--ink-rgb),.16) 15px 16px,transparent 16px),
      radial-gradient(circle at 35% 30%,rgba(255,255,255,.22),transparent 60%),
      color-mix(in srgb,var(--orange) 68%,#8A6A44);
  }
}
.ficha .fc-fl:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(var(--ink-rgb),.45)}
.fc-fotos.is-una .fc-fl,.fc-fotos.is-una .fc-regla{display:none}
.fc-fotos[hidden]{display:none}
html:not(.con-ficha) .ficha .fc-fl{display:none}
/* sin plano de verdad no hay nada de planos: ni la lámina, ni la pestaña, ni «↓ planos» */
.ficha.sin-planos .fc-plano,.ficha.sin-planos .fc-baja{display:none}
.ficha.sin-fotos .fc-plano{border-top:0;box-shadow:none}
@media (hover:none){.ficha .fc-fl{display:none}}
/* pie de la foto: bajar a planos · regla de fotos (una rayita por foto) · cuenta */
.fc-pie{
  position:absolute;left:0;right:0;bottom:0;z-index:7;pointer-events:none;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:12px;
  padding:48px clamp(12px,2.2vw,26px) clamp(12px,1.8vw,20px);
  background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--papel);
}
.fc-pie > *{pointer-events:auto}
.ficha .fc-baja{justify-self:start;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--papel);padding:8px 0;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.fc-baja i{font-style:normal;display:inline-block;animation:cue 1.8s ease-in-out infinite}
/* en escritorio «↓ Planos» va en caja, como el botón de compartir: sin las pestañas es la única entrada al
   plano además del scroll, y como letra suelta sobre la foto se perdía. En el celular se queda como letra:
   ahí la lámina del plano ya se asoma bajo la foto */
@media (min-width:761px){
  .ficha .fc-baja{
    min-height:38px;padding:0 14px 0 12px;font-size:12.5px;color:var(--ink);text-shadow:none;
    background:var(--bone);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
    transition:background .16s ease,transform .12s ease,box-shadow .12s ease;
  }
  .ficha .fc-baja i{color:var(--orange-t,var(--orange));font-weight:700}
  .ficha .fc-baja:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
  .ficha .fc-baja:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
}
/* con teclado a la mano (compu: puntero fino), los atajos dibujados como tecla: P en «↓ Planos» y M en
   «Más información» (el «+» de su renglón también es tecla) */
@media (min-width:761px) and (hover:hover) and (pointer:fine){
  .ficha .fc-baja::after,.mas__t::after{
    content:"P";margin-left:3px;min-width:19px;height:19px;padding:0 4px;box-sizing:border-box;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:10.5px;font-weight:700;letter-spacing:0;line-height:1;color:var(--ink);
    background:var(--papel);border:1.5px solid var(--ink);border-bottom-width:3px;border-radius:3px;
  }
  .mas__t::after{content:"M";margin-left:12px;vertical-align:4px;font-family:var(--mono)}
}
@media (min-width:761px) and (hover:hover){.ficha .fc-baja:hover{background:var(--bone-2);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}}
.fc-regla{display:flex;align-items:flex-end;justify-content:center;max-width:min(70vw,560px);overflow:hidden}
.ficha .fc-raya{position:relative;width:12px;height:30px;flex:none}
.fc-raya::after{
  content:"";position:absolute;left:4.5px;bottom:4px;width:3px;height:11px;border-radius:1.5px;background:var(--papel);opacity:.7;
  box-shadow:0 0 0 1px rgba(0,0,0,.28);
  transform-origin:bottom;transition:transform .3s cubic-bezier(.2,.9,.3,1.35),opacity .2s ease,background .2s ease;
}
.fc-raya:nth-child(5n+1)::after{height:15px}
@media (hover:hover){.fc-raya:hover::after{opacity:1;transform:scaleY(1.3)}}
.fc-raya[aria-current="true"]::after{opacity:1;background:var(--orange);transform:scaleY(1.7)}
.fc-cuenta{justify-self:end;font-variant-numeric:tabular-nums;padding:8px 0;text-shadow:0 1px 2px rgba(0,0,0,.6)}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* vista previa de la regla: al pasar por una rayita sale, en chiquito, la foto que se vería.
   Nace de la rayita (origen abajo) y, ya a la vista, se desliza de una a otra sin volver a
   aparecer. Solo con mouse o teclado: en touch la regla se toca y ya. */
.fc-prev{
  position:absolute;left:0;bottom:64px;z-index:8;margin:0;width:clamp(150px,14vw,200px);pointer-events:none;
  padding:6px 6px 0;background:var(--papel);border-radius:2px;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 30px -8px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform-origin:50% 100%;
  transform:translate3d(var(--x,0px),8px,0) rotate(var(--r,0deg)) scale(.92);
  transition:opacity .14s ease,transform .22s cubic-bezier(.2,.8,.3,1),visibility 0s .14s;
}
.fc-prev.on{opacity:1;visibility:visible;transform:translate3d(var(--x,0px),0,0) rotate(var(--r,0deg)) scale(1);transition-delay:0s}
.fc-prev.al-vuelo{transition:none}
.fc-prev img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--bone-2);opacity:0;transition:opacity .18s ease}
.fc-prev img.ok{opacity:1}
.fc-prev figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted);text-align:center;padding:4px 0 5px;font-variant-numeric:tabular-nums}
@media (hover:none){.fc-prev{display:none}}
/* LUPA · clic en la foto: una lupa de verdad (lente redondo, aro naranja, mango de madera con
   el aumento grabado) con zoom justo donde se picó. Con mouse sigue al cursor —por eso la
   posición NO lleva transición: va en .fc-lupa; lo que aparece y crece es .fc-lupa__c— y el
   mango se columpia tantito con la velocidad, como algo que traes en la mano. Tiene dos aumentos:
   1er clic la saca, 2º clic acerca más, 3er clic la guarda (igual que Esc, cambiar de foto o
   bajar al plano). Con el dedo el lente se toma y se arrastra, tocarlo da el paso y tocar fuera
   de él la guarda (ver «lupa» en JS). */
.fc-pista{cursor:var(--cur-lupa)}
.fc-fotos.is-lupa .fc-pista{cursor:none}   /* la lupa ES el cursor */
.fc-lupa{--d:clamp(200px,30vw,430px);position:absolute;left:0;top:0;z-index:9;pointer-events:none;width:var(--d);height:var(--d);will-change:transform}
/* la caja filtrada es el doble de grande que el lente (centrada en él): Safari, en cuanto nada se
   anima, pinta el drop-shadow en software y recorta al border-box del elemento filtrado — con la
   caja justa el mango salía cortado en recto al quedarse quieto el cursor */
.fc-lupa__c{
  position:absolute;inset:calc(var(--d) * -.5);
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.45)) drop-shadow(0 2px 3px rgba(0,0,0,.35));
  opacity:0;visibility:hidden;transform:rotate(-16deg) scale(.55);
  transition:opacity .14s ease,transform .26s var(--resorte),visibility 0s .14s;
}
.fc-lupa__c.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.fc-lupa__mango{position:absolute;inset:0;transform:rotate(var(--giro,0deg));transition:transform .32s cubic-bezier(.2,.8,.3,1)}
/* mismo dibujo que el cursor (--cur-lupa), en grande: aro naranja y mango de madera perfilados
   en café, y nada de blancos ni brillos — el naranja se lee sobre fotos oscuras, el café sobre claras */
.fc-lupa__mango i{
  position:absolute;left:50%;top:50%;width:calc(var(--d) * .64);height:calc(var(--d) * .13);margin-top:calc(var(--d) * -.065);
  transform-origin:0 50%;transform:rotate(45deg) translateX(calc(var(--d) * .5 - 6px));
  display:flex;align-items:center;justify-content:center;padding-left:14%;box-sizing:border-box;
  border-radius:2px 999px 999px 2px;border:calc(var(--d) * .012) solid var(--ink);
  background:#8A6A44;
}
.fc-lupa__t{position:relative;font-style:normal;font-family:var(--mono);font-size:clamp(9.5px,.85vw,11.5px);letter-spacing:.1em;color:var(--ink)}
.fc-lupa__v{position:absolute;inset:calc(var(--d) * .5);border-radius:50%;overflow:hidden;background:var(--ink)}
/* con el aumento, cada pixel de la foto del CRM se estira en 3–5 de pantalla: el suavizado la deja
   lavada, casi blanca, y se asoma la compresión. Tantito más de contraste y color le regresa el cuerpo
   (solo al lente: la foto de atrás queda como es) */
.fc-lupa{--lupa-tono:contrast(1.2) saturate(1.12) brightness(.95)}
.fc-lupa__v img{position:absolute;left:0;top:0;max-width:none;display:block;will-change:transform;filter:var(--lupa-tono)}
.fc-lupa__v::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 20px rgba(0,0,0,.3)}   /* el vidrio: solo la orilla tantito más oscura */
.fc-lupa__aro{--aro:calc(var(--d) * .036);position:absolute;inset:calc(var(--d) * .5 - 1px);border-radius:50%;border:var(--aro) solid var(--ink)}
.fc-lupa__aro::after{content:"";position:absolute;inset:calc(var(--aro) * -.76);border-radius:50%;border:calc(var(--aro) * .52) solid var(--orange)}
/* abierta con el dedo (.is-lupa-dedo) la lupa sí se toca: el vidrio, el aro y el mango (no la caja de
   alrededor), y sin que el navegador tome el arrastre por scroll del cajón */
.fc-fotos.is-lupa-dedo :is(.fc-lupa__v,.fc-lupa__aro,.fc-lupa__mango i){pointer-events:auto;touch-action:none}

/* PLANOS · misma lámina que A-01: se traza con el scroll (JS pone .is-live) */
.fc-plano{
  position:relative;z-index:2;border-top:2.5px solid var(--ink);
  box-shadow:0 -16px 44px rgba(var(--ink-rgb),.3);
  background:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    var(--bone-2);
  background-size:48px 48px;
}
.fc-plano__stage{display:flex;flex-direction:column;padding:clamp(66px,9vh,84px) var(--pad) clamp(14px,2.4vh,26px);scroll-margin-top:var(--pega,106px)}
/* una ventana y ya: el scroll solo trae la lámina (y la dibuja mientras sube); ya arriba, las pestañas
   cambian de plano y cada uno se dibuja solo, rapidito (ver anima() en ficha.js) */
/* …menos lo que ASOMA «Más información» por abajo (--asoma): el renglón se ve sobre el cajetín y se sabe que
   ahí sigue algo; con scroll sale entero. Sin plano, asoma bajo las fotos */
.pg-modelo{--asoma:56px}
@media (max-width:620px){.pg-modelo{--asoma:50px}}
.fc-plano.is-live{height:calc(var(--fh,100vh) - var(--asoma,0px));box-sizing:border-box}   /* con su raya de arriba adentro */
.fc-plano.is-live .fc-plano__stage{height:calc(var(--fh,100vh) - var(--asoma,0px) - 2.5px)}
@media (min-width:761px){.con-ficha .ficha.sin-planos .fc-fotos{height:calc(var(--fh,70vh) - var(--asoma,0px))}}
/* la hoja: borde de tinta y cuadrícula fina, como las láminas del home */
.fc-sheet{
  border:2.5px solid var(--ink);max-width:1180px;margin:0 auto;position:relative;
  background:
    linear-gradient(var(--grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px),
    var(--bone);
  background-size:12px 12px;
}
.sheet__hud{
  display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;
  border-bottom:1.5px solid var(--ink);padding:10px 14px;background:var(--bone);position:relative;z-index:5;
}
.sheet__hud .hud-state{color:var(--orange-t)}
.fc-sheet{width:100%;display:flex;flex-direction:column}
.fc-plano.is-live .fc-sheet{flex:1;min-height:0}
.fc-tablero{position:relative;display:flex;flex-direction:column}
.fc-plano.is-live .fc-tablero{flex:1;min-height:0}
.fc-lienzo{position:relative}
.fc-plano.is-live .fc-lienzo{flex:1;min-height:0}
/* VERSIONES · un modelo puede venir en varios tamaños (Wood Lodge 27 · 38 · 49): cada uno trae
   sus propios planos. El selector flota en la esquina del tablero, donde el dibujo no llega. */
.fc-vars{position:absolute;left:clamp(8px,1.2vw,14px);top:clamp(8px,1.2vw,14px);z-index:6;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.fc-vars[hidden]{display:none}
.fc-vars__g{display:inline-flex;border:1.5px solid var(--ink);background:var(--bone)}
.ficha .fc-var{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink);padding:5px 10px;min-width:34px;text-align:center;text-transform:uppercase;transition:background .16s ease,color .16s ease}
.fc-var + .fc-var{border-left:1.5px solid var(--ink)}
.ficha .fc-var[aria-pressed="true"]{background:var(--ink);color:var(--bone)}
@media (hover:hover){.ficha .fc-var:hover:not([aria-pressed="true"]){background:var(--bone-2)}}
@media (pointer:coarse){.ficha .fc-var{padding:9px 12px}}
.fc-capa{--capa-pad:clamp(8px,1.5vw,18px);position:relative;padding:var(--capa-pad)}
.fc-capa + .fc-capa{border-top:1.5px dashed var(--line)}
.fc-capa svg,.fc-capa img{display:block;width:100%;height:auto;margin:0 auto}
.fc-plano.is-live .fc-capa{position:absolute;inset:0;border:0;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.fc-plano.is-live .fc-capa.on{opacity:1;visibility:visible;transition-delay:0s}
.fc-plano.is-live .fc-capa svg,.fc-plano.is-live .fc-capa img{height:100%;object-fit:contain}
/* CALCO · un plano que es imagen (alzados, plantas a color) trae su calco en trazos (herramientas/calca.py):
   se dibuja línea por línea encima, en el mismo lugar que la imagen, y al acabar la imagen aparece y el
   calco se va (el JS les pone la opacidad). La imagen es la que se queda: el plano de siempre, idéntico. */
.fc-plano.is-live .fc-capa svg.fc-calca{
  position:absolute;left:var(--capa-pad);top:var(--capa-pad);
  width:calc(100% - 2 * var(--capa-pad));height:calc(100% - 2 * var(--capa-pad));
  pointer-events:none;transition:opacity .5s ease;
}
.fc-plano.is-live .dp{will-change:stroke-dashoffset}
.fc-plano.is-live .cota,.fc-plano.is-live .fc-tinta{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.fc-plano.is-live .cota.on,.fc-plano.is-live .fc-tinta.on{opacity:1;transform:none}
.fc-filo{display:none}
.fc-plano.is-live .fc-filo{display:block;position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--orange);opacity:0;pointer-events:none}
.fc-sello{fill:none;stroke:var(--orange);stroke-width:2.5}
.fc-sello-t{font-family:var(--mono);fill:var(--orange);letter-spacing:.14em}
.fc-sheet__pie{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;
  border-top:2.5px solid var(--ink);background:var(--bone);padding:8px 14px;position:relative;z-index:5;
}
/* las pestañas de los planos son botones de verdad —todas, la elegida también—: caja con sombra dura como
   la barra de la ficha; al pasar se levantan tantito, al picar se hunden y la elegida queda en tinta */
.fc-ptabs{display:flex;flex-wrap:wrap;gap:8px 10px;padding:0 3px 3px 0}
.ficha .fc-ptab{
  display:inline-flex;align-items:center;min-height:34px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;padding:0 12px;
  border:1.5px solid var(--ink);background:var(--bone);color:var(--ink);box-shadow:2px 2px 0 var(--ink);
  transition:background .15s ease,color .15s ease,transform .12s ease,box-shadow .12s ease;
}
.fc-ptab b{font-weight:400;color:var(--orange-t,var(--orange));margin-right:.5em}
@media (hover:hover){.ficha .fc-ptab:hover:not([aria-current="true"]){background:var(--bone-2);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}}
.ficha .fc-ptab:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.ficha .fc-ptab[aria-current="true"]{background:var(--ink);color:var(--bone);transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.ficha .fc-ptab[aria-current="true"] b{color:var(--orange)}
.ficha .fc-ptab:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ficha a.fc-ptab{text-decoration:none;border-style:dashed}
@media (pointer:coarse){.ficha .fc-ptab{min-height:44px}}
.fc-sheet__nota{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.fc-pide{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-decoration:none;border-bottom:2px solid var(--orange);white-space:nowrap}
.fc-pide:hover{color:var(--orange-t,var(--orange))}   /* texto naranja sobre papel: el tostado de la capa de marca */
/* sin JS: los planos van uno tras otro, cada uno con su pie */
.fc-capa figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;padding-top:8px}
.fc-capa img{max-height:70vh;object-fit:contain}

/* ---- CAJETÍN DEL MODELO · los datos, siempre a la vista (el de la ficha en grande, calcado) ---- */
.mcaj{
  position:sticky;bottom:0;z-index:58;display:grid;
  /* los datos nunca se recortan (max-content): si falta ancho, el que cede es el nombre, que sabe partirse */
  grid-template-columns:minmax(0,2.3fr) repeat(3,minmax(max-content,1fr)) auto auto auto;
  min-height:var(--caj-h);border-top:2.5px solid var(--ink);background:var(--bone);
  transition:min-height .22s ease;
}
.fc-c{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:9px clamp(12px,1.5vw,20px);border-left:2px solid var(--ink)}
.fc-c:first-child{border-left:0}
.fc-c b{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;font-variant-numeric:tabular-nums}
.fc-c > span{font-family:var(--mono);font-size:13.5px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-c--modelo{flex-direction:row;align-items:center;justify-content:flex-start;gap:4px clamp(12px,1.6vw,22px);flex-wrap:wrap}
.fc-mod{min-width:0;display:flex;align-items:center;gap:clamp(10px,1.3vw,18px)}
.fc-mod > div{min-width:0;display:flex;flex-direction:column;gap:1px}
.fc-nombre{font-family:var(--disp);font-weight:800;font-size:clamp(19px,2vw,28px);letter-spacing:-.015em;line-height:1.08}
.fc-c .fc-nota{font-family:var(--mano);font-weight:600;font-size:clamp(1.15rem,1.5vw,1.4rem);letter-spacing:0;color:var(--verde-oscuro);transform:rotate(-1.5deg);overflow:visible}
.fc-c .fc-meta{display:none}
/* superficie y capacidad, cada una entera («2–4 personas» no se parte). Entre las dos va un punto, pero solo
   si quedan en el mismo renglón: cada dato trae su punto a la izquierda, y el del que abre renglón cae fuera
   del recorte */
.fc-meta > span{position:relative;white-space:nowrap;margin:0 1.8em 0 -1.8em;padding-left:1.8em}
.fc-meta > span::before{content:"·";position:absolute;left:.6em}
/* la silueta del modelo (la misma del comparador, pintada como allá cuando está elegida) */
.fc-silu{display:block;width:clamp(56px,5.4vw,78px);height:clamp(34px,3.2vw,44px);flex:none}
.fc-silu svg{display:block;width:100%;height:100%;overflow:visible}
.fc-silu__s,.fc-silu__p{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.fc-silu__s{fill:rgba(var(--orange-rgb),.14);stroke:var(--orange);stroke-width:1.9}
.fc-silu__p{fill:none;stroke:var(--ink);stroke-width:1.4}
.btn.fc-cta{align-self:stretch;border:0;border-left:2px solid var(--ink);border-radius:0;padding:0 clamp(16px,2vw,28px);font-size:clamp(15px,1.25vw,17px);white-space:nowrap}
.fc-cta .corto{display:none}
html[data-color="marca"] .btn.btn--wa.fc-cta{border-radius:0}   /* es una celda del cajetín, como el WhatsApp de la barra */
/* «Me interesa» es una celda más del cajetín, junto a «Cotizar» */
.fc-interes{
  appearance:none;-webkit-appearance:none;position:relative;align-self:stretch;display:inline-flex;align-items:center;gap:.45em;
  border:0;border-left:2px solid var(--ink);border-radius:0;background:var(--bone);color:var(--ink);cursor:pointer;
  padding:0 clamp(12px,1.5vw,22px);font-family:var(--disp);font-weight:700;font-size:clamp(14px,1.15vw,16px);line-height:1;white-space:nowrap;
  transition:background-color .15s ease;
}
.fc-interes svg{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fc-interes[aria-pressed="true"]{background:var(--lona)}
.fc-interes[aria-pressed="true"] svg{color:var(--verde-oscuro);stroke-width:2.3}
.fc-interes :is(.mi-si,.mi-i-si),.fc-interes[aria-pressed="true"] :is(.mi-no,.mi-i-no){display:none}
.fc-interes[aria-pressed="true"] :is(.mi-si,.mi-i-si){display:inline}
@media (hover:hover){.fc-interes:hover{background:var(--bone-2)}.fc-interes[aria-pressed="true"]:hover{background:var(--lona-2)}}
.fc-interes:focus-visible{outline:2px solid var(--orange);outline-offset:-5px}
/* «Compartir» también es una celda del cajetín (antes flotaba arriba de la foto): en celular abre el menú del
   teléfono; en compu copia la liga y su rótulo, que sale hacia arriba, avisa «¡Liga copiada!» */
.fc-comp{
  appearance:none;-webkit-appearance:none;position:relative;align-self:stretch;display:grid;place-items:center;
  border:0;border-left:2px solid var(--ink);border-radius:0;background:var(--bone);color:var(--ink);cursor:pointer;
  padding:0 13px;transition:background-color .15s ease,color .15s ease;
}
.fc-comp svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fc-comp .mc-t{
  position:absolute;right:6px;bottom:calc(100% + 10px);z-index:6;pointer-events:none;white-space:nowrap;
  font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--bone);padding:6px 8px 5px;
  opacity:0;transform:translateY(3px);transition:opacity .15s ease,transform .15s ease;
}
@media (hover:hover){.fc-comp:hover{background:var(--bone-2)}.fc-comp:hover .mc-t{opacity:1;transform:none}}
.fc-comp:is(:focus-visible,.is-ok) .mc-t{opacity:1;transform:none}
.fc-comp :is(.mc-ok,.mc-i-ok),.fc-comp.is-ok :is(.mc-lbl,.mc-i-comp){display:none}
.fc-comp.is-ok :is(.mc-ok,.mc-i-ok){display:inline}
.fc-comp.is-ok{color:var(--verde-oscuro)}
.fc-comp:active{background:var(--ink);color:var(--bone)}
.fc-comp:focus-visible{outline:2px solid var(--orange);outline-offset:-5px}
/* ya leyendo la página (las fotos quedaron arriba) el cajetín adelgaza a un renglón, como el del home
   en el catálogo: sigue el nombre, los datos y los dos botones */
.mcaj.is-slim{min-height:58px}
.mcaj.is-slim .fc-c{padding-top:4px;padding-bottom:4px}
.mcaj.is-slim .fc-c .fc-nota,.mcaj.is-slim .fc-mod > div > b{display:none}
.mcaj.is-slim .fc-nombre{font-size:clamp(17px,1.5vw,21px)}
.mcaj.is-slim .fc-silu{width:54px;height:32px}
@media (max-width:1080px){.fc-c--nota{display:none}.mcaj{grid-template-columns:minmax(0,2.3fr) repeat(2,minmax(max-content,1fr)) auto auto auto}.fc-c .fc-nota{display:none}}

/* tablet: las celdas de datos ya no caben enteras; van en un renglón bajo el nombre, como en el celular */
@media (max-width:960px){
  .mcaj,.mcaj.is-slim{grid-template-columns:minmax(0,1fr) auto auto auto}
  .fc-c--dato{display:none}
  .fc-mod > div > b{display:none}
  .fc-c .fc-meta{display:flex;flex-wrap:wrap;overflow:hidden;font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:normal}
}
@media (max-width:760px){
  .pg-modelo{--caj-h:62px}
  .mcaj,.mcaj.is-slim{min-height:var(--caj-h)}
  /* corazón y compartir, uno sobre otro en la misma columna: así compartir cabe sin quitarle ancho al nombre */
  .mcaj,.mcaj.is-slim{grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:1fr 1fr}
  .mcaj > .fc-c--modelo,.mcaj > .fc-cta{grid-row:1 / 3}
  .mcaj > .fc-interes{grid-column:2;grid-row:1;min-height:36px}
  .mcaj > .fc-comp{grid-column:2;grid-row:2;border-top:2px solid var(--ink);padding:0 16px;min-height:36px}
  .mcaj > .fc-cta{grid-column:3}
  .fc-c--modelo{padding-left:14px}
  /* en el celular solo el ícono (el texto sigue ahí para el lector de pantalla) */
  .fc-interes{padding:0 16px}
  .fc-interes .mi-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .fc-interes svg{width:20px;height:20px}
  .fc-silu,.mcaj.is-slim .fc-silu{width:42px;height:28px}
  .fc-nombre,.mcaj.is-slim .fc-nombre{font-size:18px}
  .fc-cta .largo{display:none}
  .fc-cta .corto{display:inline}
  .btn.fc-cta{padding:0 18px;font-size:15px}
  /* EN EL CELULAR la foto va en su banda 4:3 a todo lo ancho —casi todas las del CRM son 4:3— y SIEMPRE
     cubre: nada de franjas desenfocadas. La lámina del plano se asoma debajo. Sin flechas: la foto se
     desliza y la lupa se toca. */
  .con-ficha .fc-fotos{height:min(75vw,calc(var(--fh,70vh) - 150px))}
  .ficha .fc-fl{display:none}
  .fc-pie{grid-template-columns:auto 1fr auto}
  .fc-regla{max-width:none}
  .ficha .fc-raya{width:9px}
  .fc-raya::after{left:3px}
  .fc-plano__stage{padding:14px 10px clamp(14px,2.4vh,26px)}
  .fc-capa{overflow:hidden}
  .fc-capa--apaisada svg{transform:scale(1.22)}
}
/* celular angosto: nombre, corazón y «Cotizar» (los datos van en «Más información») */
@media (max-width:359.5px){.fc-c .fc-meta{display:none}.fc-c--modelo{padding-left:10px}.btn.fc-cta{padding:0 12px}.fc-interes{padding:0 12px}}
@media (prefers-reduced-motion:reduce){.fc-baja i{animation:none}.fc-prev,.fc-prev.on{transition:opacity .14s ease,visibility 0s}.fc-lupa__c,.fc-lupa__c.on{transform:none;transition:opacity .14s ease,visibility 0s}.fc-lupa__mango{transform:none;transition:none}}

/* ---- MÁS INFORMACIÓN · a la vista quedan las fotos y el cajetín; lo demás (descripción, versiones y medidas,
   planos, galería, otros modelos) va guardado aquí y se abre con un clic en el renglón, con «↓ Más información»
   de la foto o al llegar por una liga a algo de adentro (#planos). Es un <details>: sin JS también abre ---- */
.mas{scroll-margin-top:var(--pega,106px)}
.mas__s{display:block;list-style:none;cursor:pointer;background:var(--papel);border-bottom:2px solid var(--ink);-webkit-tap-highlight-color:transparent;transition:background .15s ease}
.mas__s::-webkit-details-marker{display:none}
.mas__in{display:flex;align-items:center;gap:6px 18px;min-height:72px}
.mas__t{font-family:var(--disp);font-weight:750;font-size:clamp(19px,2vw,23px);letter-spacing:-.01em;white-space:nowrap}
.mas__d{flex:1;min-width:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* el «+» del renglón: caja con sombra dura, como los botones de la ficha; abierto es «−» */
.mas__i{position:relative;flex:none;width:38px;height:38px;border:2px solid var(--ink);background:var(--bone);box-shadow:3px 3px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease}
.mas__i::before,.mas__i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--ink);transition:transform .2s ease}
.mas__i::after{transform:rotate(90deg)}
.mas[open] > .mas__s .mas__i::after{transform:rotate(0deg)}
@media (hover:hover){.mas__s:hover{background:var(--bone-2)}.mas__s:hover .mas__i{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}}
.mas__s:active .mas__i{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.mas__s:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
@media (max-width:620px){
  .mas__in{flex-wrap:wrap;min-height:66px;padding-top:10px;padding-bottom:10px}
  .mas__t{flex:1}
  .mas__d{order:3;flex:0 0 100%;font-size:10px;letter-spacing:.06em}
}

/* ---- lo de adentro de «Más información»: la lámina del modelo (migas, nombre y entrada), su texto y sus medidas ---- */
.lamina--modelo{padding-top:clamp(30px,5vw,56px)}
.migas{margin-bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;row-gap:4px}
.migas li:not(:last-child)::after{content:"/";margin:0 .75em;opacity:.55}
.migas a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease,color .15s ease}
.migas a:hover{color:var(--ink);border-bottom-color:var(--orange)}
.migas [aria-current]{color:var(--ink)}
.lamina .lamina__h{font-size:clamp(32px,5.2vw,52px);font-weight:750;line-height:1.05;letter-spacing:-.02em;margin-bottom:12px}
html[data-color="marca"] .lamina .lamina__h::before{
  content:"";display:block;width:.44em;height:.55em;margin-bottom:.3em;background:var(--orange);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='348 245.5 96 121'%3E%3Cpath d='M417.04 245.75 366.69 366.24l-18.54.01 50.33-120.5z'/%3E%3Cpath d='M374.96 245.75 425.31 366.24l18.54.01-50.26-120.5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='348 245.5 96 121'%3E%3Cpath d='M417.04 245.75 366.69 366.24l-18.54.01 50.33-120.5z'/%3E%3Cpath d='M374.96 245.75 425.31 366.24l18.54.01-50.26-120.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* la descripción es una hoja del expediente, como el documento de las legales */
.doc.doc--modelo{margin-top:clamp(20px,3vw,30px);margin-bottom:0}
.doc--modelo h2 em{font-style:normal;color:var(--orange-t)}
html[data-color="marca"] .doc--modelo h2 em{
  color:inherit;padding:0 .06em;margin:0 -.06em;
  background:linear-gradient(var(--orange),var(--orange)) 0 86%/100% .17em no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* versiones: cuatro columnas cortas, caben sin desplazar */
.tabla--versiones table{min-width:0}
.tabla--versiones tbody th{font-weight:600}
.tabla--versiones td{font-family:var(--mono);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .tabla--versiones table{font-size:14px}
  .tabla--versiones th,.tabla--versiones td{padding:9px 8px}
  .tabla--versiones thead th{letter-spacing:.04em}
  .tabla--versiones td{font-size:12px}
}
.cajetin.cajetin--detalles{margin:0 0 12px}
.cajetin dt{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted);margin-bottom:3px}
.cajetin dd{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.mas .bloque:last-child,.mas > section:last-child .bloque{margin-bottom:clamp(40px,6vw,70px)}

/* lo legal, al final de lo guardado (la página no lleva pie) */
/* OTROS MODELOS · las otras fichas con liga de texto (en la tira las ligas son siluetas dentro de un SVG).
   Van guardadas aquí, en un renglón corrido del peso de la nota legal: el nombre y, al lado, sus m² */
.mas__otros{margin-top:22px;padding-top:14px;border-top:1px dashed rgba(var(--ink-rgb),.3)}
.mas__otros h2{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;color:var(--muted);margin-bottom:10px}
.mas__otros ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px}
.mas__otros li{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.mas__otros a{font-family:var(--disp);font-weight:700;font-size:15px;line-height:1.3;color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
.mas__otros span{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted)}
@media (hover:hover){.mas__otros a:hover{background:var(--orange);color:var(--sobre-naranja);text-decoration-color:transparent}}
.mas__legal{margin-top:22px;padding-top:14px;border-top:1px dashed rgba(var(--ink-rgb),.3)}
.mas__legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.mas__legal a:hover{color:var(--ink)}}
@media print{.tira,.mcaj,.fc-pie,.fc-fl,.mas__s{display:none!important}}