/* ROMÉ · la colección completa: filtros cortos, índice de grupos que se enciende (11) y una grilla que nunca deja
   huecos: el protagonista de cada grupo ocupa dos columnas (o dos por dos) según cuántos relojes tenga el grupo. */
.col-cabeza { padding-top: calc(var(--cab-h) + clamp(48px, 7vw, 104px)); padding-bottom: clamp(24px, 3vw, 40px); }
.col-cabeza .bajada { margin-top: 18px; }

/* barra de filtros (pegada bajo la cabecera) */
.filtros { position: sticky; top: var(--cab-h); z-index: 20; background: var(--hueso); border-block: 1px solid var(--linea-suave); }
.filtros__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 64px; padding-block: 10px; }
.segmento { display: inline-flex; margin: 0; padding: 0; min-inline-size: 0; border: 1px solid var(--linea); }
.segmento legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.segmento label { position: relative; display: inline-flex; }
.segmento input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmento span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 48px; padding: 0 16px; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta);
  transition: background-color var(--t-micro) var(--e-soft), color var(--t-micro) var(--e-soft); }
.segmento label + label span { border-left: 1px solid var(--linea); }
.segmento input:checked + span { background: var(--navy); color: var(--hueso); }
.segmento input:not(:checked):active + span { background: var(--hueso-2); }   /* responde al dedo antes de elegir */
.segmento input:focus-visible + span { outline: 2px solid var(--bordo); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .segmento input:not(:checked):hover + span { color: var(--navy); } }
.selector { display: inline-flex; align-items: center; gap: 10px; }
.selector span { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--piedra-oscura); }
.selector select { appearance: none; min-height: 44px; max-width: 15.5rem; padding: 0 34px 0 12px; border: 1px solid var(--linea); border-radius: 0; background: var(--hueso) no-repeat right 10px center / 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2314273E' d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E");
  color: var(--navy); font: 500 15px/1.4 var(--sans); cursor: pointer; transition: border-color var(--t-micro) var(--e-soft); }   /* 1,4: con 1 se cortaban la «g» y la «p» (D2) */
.selector select:focus-visible { outline: 2px solid var(--bordo); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .selector select:hover { border-color: var(--navy); } }
/* en el computador cada selector nace con el ancho que tendrá con todas sus opciones: la fila no se corre cuando llegan
   los datos (antes, de 69 a 88 px); y la fila, más apretada, cabe en una línea también con un filtro puesto */
@media (min-width: 900px) {
  .filtros__fila { gap: 10px 12px; }
  .cuenta-larga { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .filtros__cuenta { white-space: nowrap; }
  #f-grupo { width: 14.75rem; }
  #f-estilo { width: 10.5rem; }
  #f-precio { width: 12rem; }
  #f-orden { width: 14rem; }
}
/* notebooks (900 a 1365 px): la fila más justa (huecos de 8 px, segmentos y flechas más ceñidos) para que a 1280 quepa
   en una línea también con filtros y «Limpiar» (antes «Limpiar» bajaba a una segunda fila). Cada selector conserva el
   espacio de texto de su opción más larga: solo pierde los 4 px que ahorra su flecha */
@media (min-width: 900px) and (max-width: 1365px) {
  .filtros__fila { gap: 10px 8px; }
  .segmento span { padding: 0 12px; }
  .selector select { padding-right: 30px; background-position: right 8px center; }
  #f-grupo { width: calc(14.75rem - 4px); }
  #f-estilo { width: calc(10.5rem - 4px); }
  #f-precio { width: calc(12rem - 4px); }
  #f-orden { width: calc(14rem - 4px); }
}
.filtros__panel { display: contents; }
.filtros__abrir { display: none; }
.filtros__cuenta { margin-left: auto; font-size: 14px; color: var(--tenue); }
.filtros__limpiar { min-height: 44px; order: 10; }   /* vive dentro del panel; en el computador sigue al final de la fila */
@media (max-width: 899px) {
  .filtros__fila { gap: 10px 12px; }
  .filtros__abrir { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea); background: transparent; cursor: pointer;
    font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--navy); transition: scale var(--t-press) var(--e-out); }
  .filtros__abrir:active { scale: .97; }
  .filtros__abrir b { min-width: 20px; height: 20px; display: inline-grid; place-items: center; background: var(--navy); color: var(--hueso); font-size: 11px; letter-spacing: 0; }
  .filtros__abrir .icono { transition: transform var(--t-micro) var(--e-out); }
  .filtros__abrir[aria-expanded="true"] .icono { transform: rotate(180deg); }
  /* el panel se despliega como una hoja sobre la vitrina, sin empujarla: así la barra pegada sigue siendo corta y el
     panel no acompaña al dedo (se cierra al bajar, al tocar fuera o con Escape; coleccion.js) */
  .filtros__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    padding: 6px var(--gutr) 20px var(--gut); background: var(--hueso); border-bottom: 1px solid var(--linea-suave); box-shadow: 0 24px 40px -28px rgb(var(--sombra) / .45); }
  .filtros__panel:not(.abierto) { display: none; }
  .filtros__panel.abierto { animation: panel-entra var(--t-ui) var(--e-out) both; }   /* se desenrolla como el menú; se cierra en seco */
  @keyframes panel-entra { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -80px 0); } }   /* deja ver su sombra */
  .selector { display: grid; gap: 6px; }
  .selector select { width: 100%; max-width: none; }
  .filtros__limpiar { justify-self: start; }
  .filtros__cuenta { margin-left: 0; width: 100%; order: 9; }
}
@media (max-width: 400px) { .segmento span { padding: 0 12px; } .filtros__panel { grid-template-columns: 1fr; } }

/* índice de grupos (computador) y vitrina */
.col-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: clamp(36px, 5vw, 64px) clamp(80px, 10vw, 140px); }
.indice { display: none; }
/* la barra de filtros pegada no entra en el scroll-padding: si entrara, tocar uno de sus controles subía la página 416 a
   422 px para «mostrarlo» (H2-08). Su aire va solo en lo que puede quedar debajo de ella (tarjetas e índice; la cabeza
   de cada grupo ya lo trae) */
html { scroll-padding-top: calc(var(--cab-h) + 4px); }
.tarjeta__enlace, .indice a { scroll-margin-top: calc(var(--alto-filtros, 68px) + 16px); }
@media (min-width: 1100px) {
  .col-cuerpo { grid-template-columns: 220px minmax(0, 1fr); gap: clamp(40px, 4vw, 72px); }
  .col-cuerpo.sin-indice { grid-template-columns: minmax(0, 1fr); }
  .indice { display: block; position: sticky; top: calc(var(--cab-h) + 96px); align-self: start; }
  .indice ol { display: grid; gap: 2px; }
  .indice a { display: flex; align-items: center; min-height: 44px; text-decoration: none; font: 400 17px/1.25 var(--serif); color: var(--tenue); transition: color var(--t-ui) var(--e-out), transform var(--t-ui) var(--e-out); }
  .indice a[aria-current="true"] { color: var(--navy); transform: translateX(8px); }
  @media (hover: hover) and (pointer: fine) { .indice a:hover { color: var(--navy); } }
}
.vitrina { min-width: 0; scroll-margin-top: calc(var(--cab-h) + var(--alto-filtros, 68px) + 20px); }   /* al filtrar desde abajo (H1-01) */
.vitrina[aria-busy="true"] { min-height: 150svh; }
.grupo + .grupo { margin-top: clamp(64px, 8vw, 112px); }
/* al tocar un grupo del índice, su título queda a la vista bajo la cabecera y la barra de filtros (movimiento.js) */
.grupo__cabeza { max-width: 640px; margin-bottom: clamp(24px, 3vw, 36px); scroll-margin-top: calc(var(--cab-h) + var(--alto-filtros, 68px) + 28px); }
.grupo__titulo { font: 400 clamp(28px, 2.6vw, 38px)/1.1 var(--serif); letter-spacing: -.008em; }
.grupo__texto { margin-top: 10px; color: var(--tinta); font-size: 16px; }
.grilla { --g-col: clamp(16px, 2vw, 28px); display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-auto-flow: row dense; gap: clamp(28px, 3vw, 40px) var(--g-col); }
@media (max-width: 1099px) { .grilla { --cols: 3; } }
@media (max-width: 759px) { .grilla { --cols: 2; --g-col: 14px; gap: 28px var(--g-col); } }

.tarjeta { min-width: 0; }
/* align-content: start, para que el nombre de cada tarjeta quede a la misma altura que el de sus vecinas de fila */
.tarjeta__enlace { display: grid; gap: 12px; align-content: start; height: 100%; text-decoration: none; color: var(--navy); }
.tarjeta__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hueso-2); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 45%; transition: transform var(--t-lento) var(--e-soft); }
.tarjeta__texto { display: grid; gap: 6px; align-content: start; }
.tarjeta__nombre { font: 400 19px/1.2 var(--serif); letter-spacing: -.004em; }
.tarjeta__meta { color: var(--tenue); }
.tarjeta__pie { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; min-height: 22px; }   /* con o sin medida, el precio a la misma altura (H1-15) */
/* tras «Limpiar», el título vuelve con aire bajo la cabecera, no pegado a ella (H1-06) */
#coleccion-titulo { scroll-margin-top: calc(var(--cab-h) + 32px); }
/* los precios de una fila, a la misma altura: el texto ocupa el resto de la tarjeta y el precio baja a su pie, aunque un
   nombre tenga una línea y su vecino tres (H2-12). Las grandes van aparte */
.tarjeta:not(.tarjeta--grande) .tarjeta__enlace { grid-template-rows: auto 1fr; }
.tarjeta:not(.tarjeta--grande) .tarjeta__texto { display: flex; flex-direction: column; }
.tarjeta:not(.tarjeta--grande) .tarjeta__pie { margin-top: auto; }
.tarjeta__precio { font: 600 15px/1.2 var(--sans); }
.tarjeta__medida { font-size: 13.5px; color: var(--tenue); }
/* acercamiento lento a la esfera al pasar el mouse (09 y 10; mientras no haya fotos en la muñeca) */
@media (hover: hover) and (pointer: fine) {
  .tarjeta__enlace:hover .tarjeta__foto img, .tarjeta__enlace:focus-visible .tarjeta__foto img { transform: scale(1.45); }
}
.tarjeta__enlace:focus-visible { outline: none; }
.tarjeta__enlace:focus-visible .tarjeta__foto { outline: 2px solid var(--bordo); outline-offset: 3px; }
.tarjeta__enlace:active .tarjeta__foto { scale: .985; transition: scale var(--t-press) var(--e-out); }

/* protagonistas: dos por dos, o dos columnas con la foto al lado */
.tarjeta--grande { grid-column: span 2; grid-row: span 2; }
.tarjeta--grande .tarjeta__foto { aspect-ratio: auto; flex: 1; min-height: 0; }
.tarjeta--grande .tarjeta__enlace { grid-template-rows: minmax(0, 1fr) auto; }
.tarjeta--grande .tarjeta__nombre { font-size: clamp(24px, 2vw, 30px); }
.tarjeta--grande.a-la-derecha { grid-column: -3 / -1; }
/* la ancha es una vitrina de dos columnas: la foto entera, centrada en el crema de las fotos y del mismo alto que la de
   sus vecinas (1,25 × el ancho de una columna), y el texto debajo, a la altura del de ellas (antes el texto iba al lado y
   dejaba 200 a 300 px vacíos debajo) */
.tarjeta--ancha { grid-column: span 2; container-type: inline-size; }
.tarjeta--ancha .tarjeta__foto { aspect-ratio: auto; height: calc((100cqw - var(--g-col)) * .625); background: var(--fondo-foto); }
.tarjeta--ancha .tarjeta__foto img { object-fit: contain; }
.tarjeta--ancha .tarjeta__nombre { font-size: clamp(22px, 1.8vw, 26px); }
/* protagonista con foto chica (H1-05, coleccion.js): entera y centrada en el crema, sin pasar de ×1,25 (--tope) y sin
   acercamiento */
.tarjeta--chica .tarjeta__foto { background: var(--fondo-foto); }
.tarjeta--chica .tarjeta__foto img { position: absolute; inset: 0; margin: auto; object-fit: contain; max-width: var(--tope, 100%); max-height: calc(var(--tope, 80%) * 1.25); }
/* en el celular la grande ocupa la fila entera y nadie le da alto: el cuadro conserva el 4:5 de antes */
@media (max-width: 759px) { .tarjeta--grande.tarjeta--chica .tarjeta__foto { aspect-ratio: 4 / 5; } }
@media (hover: hover) and (pointer: fine) {
  .tarjeta--chica .tarjeta__enlace:hover .tarjeta__foto img, .tarjeta--chica .tarjeta__enlace:focus-visible .tarjeta__foto img { transform: none; }
}

.vitrina__vacio { padding: 40px 0; max-width: 560px; }
.vitrina__vacio h2 { font: 400 28px/1.15 var(--serif); }
.vitrina__vacio p { margin-top: 12px; color: var(--tinta); }
.vitrina__vacio .acciones { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; }   /* por la base del texto (H1-07) */
.esqueleto .tarjeta__foto { background: linear-gradient(100deg, var(--hueso-2) 30%, var(--papel) 50%, var(--hueso-2) 70%) 0 0 / 300% 100%; animation: brilla var(--t-lento) linear infinite; }
.esqueleto .linea { height: 14px; margin-top: 10px; background: var(--hueso-2); }
.esqueleto .linea + .linea { width: 60%; }
@keyframes brilla { to { background-position: -150% 0; } }

/* pie de la colección: lo que no está en la web */
.col-otro { border-top: 1px solid var(--linea); padding-block: clamp(56px, 7vw, 96px); }
.col-otro__frase { font: 400 clamp(28px, 3vw, 42px)/1.12 var(--serif); max-width: 22ch; }
.col-otro p { margin-top: 14px; color: var(--tinta); max-width: 56ch; }
.col-otro .boton { margin-top: 26px; }