/* ---------------------------------------------------------------- Catálogo de equipos — Hangar Studio / Duality Rental Escrito sobre los tokens de Canvas y de demos/shop-2. -----------------------------------------------------------------*/ /* Los tokens van en :root porque los modales de Bootstrap se pintan al final del , fuera de .cat-wrap, y allí no heredarían nada. */ :root { --cat-crema: #F8F6EE; --cat-linea: rgba(0, 0, 0, .10); --cat-tinta: #14140f; --cat-suave: #6f6a5c; } .cat-wrap { background: var(--cat-crema); } /* ── Cabecera del catálogo ─────────────────────────────────────── */ /* Ojo: .container-fluid trae "padding: 0 8vw" desde shop-2.css. Aquí solo se toca el vertical, para no perder el margen lateral del sitio. */ .cat-head { border-bottom: 1px solid var(--cat-linea); padding-top: 3.5rem; padding-bottom: 2rem; } .cat-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; margin-bottom: .6rem; } .cat-head p { color: var(--cat-suave); max-width: 46ch; margin-bottom: 0; } /* ── Buscador ──────────────────────────────────────────────────── */ .cat-search { position: relative; max-width: 30rem; } .cat-search input { width: 100%; background: #fff; border: 1px solid var(--cat-linea); border-radius: 999px; padding: .8rem 2.8rem .8rem 2.9rem; font-size: .95rem; color: var(--cat-tinta); transition: border-color .2s, box-shadow .2s; } .cat-search input:focus { outline: 0; border-color: var(--cat-tinta); box-shadow: 0 0 0 3px rgba(20, 20, 15, .06); } .cat-search .cat-search-icon, .cat-search .cat-search-clear { position: absolute; top: 50%; transform: translateY(-50%); color: var(--cat-suave); line-height: 1; } .cat-search .cat-search-icon { left: 1.1rem; pointer-events: none; } .cat-search .cat-search-clear { right: .9rem; border: 0; background: none; cursor: pointer; font-size: 1.1rem; padding: .2rem .3rem; display: none; } .cat-search.has-value .cat-search-clear { display: block; } /* ── Categorías: botón desplegable ─────────────────────────────── */ .cat-drop { position: relative; } .cat-drop-btn { display: inline-flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--cat-linea); border-radius: 999px; padding: .6rem 1.1rem; font-size: .9rem; color: var(--cat-tinta); cursor: pointer; max-width: 100%; transition: border-color .2s; } .cat-drop-btn:hover, .cat-drop-btn[aria-expanded="true"] { border-color: var(--cat-tinta); } .cat-drop-btn .etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cat-drop-btn .flecha { font-size: .7rem; color: var(--cat-suave); transition: transform .2s; } .cat-drop-btn[aria-expanded="true"] .flecha { transform: rotate(180deg); } .cat-drop-menu { position: absolute; z-index: 320; top: calc(100% + .5rem); left: 0; min-width: 19rem; max-width: min(24rem, calc(100vw - 2rem)); max-height: min(60vh, 30rem); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid var(--cat-linea); border-radius: 6px; box-shadow: 0 12px 34px rgba(0, 0, 0, .14); padding: .5rem; display: none; } .cat-drop-menu.on { display: block; } /* ── Árbol de categorías ───────────────────────────────────────── */ .cat-tree { list-style: none; margin: 0; padding: 0; } .cat-tree li { margin: 0; } .cat-tree button { display: flex; align-items: baseline; gap: .5rem; width: 100%; text-align: left; background: none; border: 0; border-radius: 4px; padding: .34rem .5rem; color: var(--cat-tinta); font-size: .93rem; line-height: 1.35; cursor: pointer; transition: background-color .15s; } .cat-tree button:hover { background: rgba(0, 0, 0, .05); } .cat-tree button .n { margin-left: auto; font-size: .78rem; color: var(--cat-suave); font-variant-numeric: tabular-nums; } .cat-tree button[aria-pressed="true"] { background: var(--cat-tinta); color: var(--cat-crema); font-weight: 500; } .cat-tree button[aria-pressed="true"] .n { color: rgba(248, 246, 238, .7); } .cat-tree .n1 button { padding-left: 1.35rem; font-size: .89rem; } .cat-tree .n2 button { padding-left: 2.3rem; font-size: .85rem; color: var(--cat-suave); } .cat-tree .n2 button[aria-pressed="true"] { color: var(--cat-crema); } /* ── Rejilla ───────────────────────────────────────────────────── */ .cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem 1.8rem; } /* El atributo hidden tiene que ganar al display de abajo: si no, las tarjetas filtradas se siguen viendo y el navegador descarga todas las fotos. */ .cat-card[hidden] { display: none !important; } .cat-card { display: flex; flex-direction: column; background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; } .cat-card-img { position: relative; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; margin-bottom: 1rem; } .cat-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 5%; /* Aparece cuando termina de cargar: sin parpadeos al ir bajando */ opacity: 0; transition: opacity .35s ease, transform .45s cubic-bezier(.215, .61, .355, 1); } .cat-card-img img.cargada { opacity: 1; } /* Si el JS no llegara a ejecutarse, las fotos se ven igual */ .no-js .cat-card-img img { opacity: 1; } /* Aviso de que el equipo tiene más de una foto */ .cat-nfotos { position: absolute; left: .7rem; bottom: .7rem; display: inline-flex; align-items: center; gap: .3rem; background: rgba(255, 255, 255, .94); border-radius: 999px; padding: .18rem .6rem; font-size: .74rem; color: var(--cat-suave); pointer-events: none; } .cat-card:hover .cat-card-img img { transform: scale(1.05); } .cat-card-img .cat-sinfoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #cdc7b6; font-size: 2rem; } .cat-card h3 { font-size: 1.05rem; font-weight: 500; line-height: 1.3; margin: 0 0 .3rem; letter-spacing: 0; text-transform: none; } .cat-card .cat-card-cat { font-size: .8rem; color: var(--cat-suave); letter-spacing: .04em; } /* Botón de añadir, sobre la foto */ .cat-add { position: absolute; right: .7rem; bottom: .7rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--cat-linea); background: rgba(255, 255, 255, .94); color: var(--cat-tinta); font-size: 1.05rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s, background-color .2s, color .2s; } .cat-card:hover .cat-add, .cat-add:focus-visible { opacity: 1; transform: translateY(0); } .cat-add:hover { background: var(--cat-tinta); color: var(--cat-crema); } .cat-card.is-added .cat-add { opacity: 1; transform: none; background: var(--cat-tinta); color: var(--cat-crema); border-color: var(--cat-tinta); } @media (hover: none) { .cat-add { opacity: 1; transform: none; } } /* ── Barra de resultados ───────────────────────────────────────── */ .cat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: 1.8rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--cat-linea); } .cat-count { font-size: .85rem; color: var(--cat-suave); } .cat-chip { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid var(--cat-linea); border-radius: 999px; padding: .3rem .55rem .3rem .8rem; font-size: .8rem; cursor: pointer; color: var(--cat-tinta); } .cat-chip:hover { border-color: var(--cat-tinta); } .cat-chip span { font-size: 1rem; line-height: 1; color: var(--cat-suave); } .cat-vacio { text-align: center; padding: 4.5rem 1rem; color: var(--cat-suave); } .cat-vacio strong { display: block; font-size: 1.15rem; color: var(--cat-tinta); margin-bottom: .4rem; } /* ── Paginación ────────────────────────────────────────────────── */ /* Sin cajas ni pastillas: texto sobre la crema, como el resto del sitio. La página actual se marca con una línea fina debajo. */ .cat-paginacion { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .2rem; } /* Arriba: pegado a la derecha, discreto, encima de la cuadrícula. */ .cat-paginacion.arriba { justify-content: flex-end; margin: -.4rem 0 1.7rem; } /* Abajo: centrado y separado por la misma línea fina que usa la barra. */ .cat-paginacion.abajo { justify-content: center; margin: 3.2rem 0 .5rem; padding-top: 1.7rem; border-top: 1px solid var(--cat-linea); } .cat-pag-btn { padding: .35rem .55rem; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; color: var(--cat-suave); font-size: .88rem; line-height: 1.4; cursor: pointer; transition: color .2s ease, border-color .2s ease; } .cat-pag-btn:hover:not(:disabled):not(.actual) { color: var(--cat-tinta); } .cat-pag-btn:focus-visible { outline: 1px solid var(--cat-tinta); outline-offset: 2px; } .cat-pag-btn.actual { color: var(--cat-tinta); border-bottom-color: var(--cat-tinta); cursor: default; } /* Anterior / Siguiente: un poco más separados de los números */ .cat-pag-btn.flecha { padding-left: .1rem; padding-right: .1rem; } .cat-pag-btn.flecha:first-child { margin-right: .7rem; } .cat-pag-btn.flecha:last-child { margin-left: .7rem; } .cat-pag-btn:disabled { opacity: .35; cursor: default; } .cat-pag-sep { padding: 0 .2rem; color: var(--cat-suave); font-size: .88rem; user-select: none; } /* ── Ficha del equipo ──────────────────────────────────────────── */ .cat-modal-img { position: relative; background: #fff; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; } .cat-modal-img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; } /* ── Carrusel de la ficha ──────────────────────────────────────── */ /* Con una sola foto no se ve ni un control: la ficha queda igual que antes. */ .cat-nav, .cat-contador-fotos, .cat-miniaturas { display: none; } .cat-carrusel.multi .cat-nav { display: flex; } .cat-carrusel.multi .cat-contador-fotos { display: block; } .cat-carrusel.multi .cat-miniaturas { display: flex; } .cat-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; align-items: center; justify-content: center; border: 1px solid var(--cat-linea); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--cat-tinta); font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: .75; transition: opacity .2s, background-color .2s; } .cat-nav:hover { opacity: 1; background: #fff; } .cat-nav.prev { left: .6rem; } .cat-nav.next { right: .6rem; } .cat-contador-fotos { position: absolute; right: .7rem; bottom: .7rem; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: .15rem .6rem; font-size: .74rem; color: var(--cat-suave); font-variant-numeric: tabular-nums; } .cat-miniaturas { gap: .5rem; margin-top: .6rem; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: .2rem; } .cat-mini { flex: 0 0 auto; width: 3.6rem; height: 3.6rem; padding: 0; border: 1px solid var(--cat-linea); background: #fff; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s; } .cat-mini img { width: 100%; height: 100%; object-fit: contain; padding: 8%; } .cat-mini:hover { opacity: 1; } .cat-mini[aria-current="true"] { opacity: 1; border-color: var(--cat-tinta); } .cat-modal .modal-content { background: var(--cat-crema); border: 0; border-radius: 0; } .cat-modal-ruta { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cat-suave); margin-bottom: .6rem; } .cat-modal h2 { font-size: 1.6rem; line-height: 1.2; margin-bottom: .9rem; text-transform: none; letter-spacing: 0; } .cat-modal .cat-desc { color: #3d3a33; font-size: .95rem; line-height: 1.7; } .cat-ref { font-size: .78rem; color: var(--cat-suave); border-top: 1px solid var(--cat-linea); margin-top: 1.4rem; padding-top: .9rem; } /* ── Cesta de solicitud ────────────────────────────────────────── */ .cat-fab { position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 399; display: none; align-items: center; gap: .6rem; background: var(--cat-tinta); color: var(--cat-crema); border: 0; border-radius: 999px; padding: .85rem 1.5rem; font-size: .88rem; letter-spacing: .04em; box-shadow: 0 6px 26px rgba(0, 0, 0, .22); cursor: pointer; } .cat-fab.on { display: flex; } .cat-fab .cat-fab-n { background: var(--cat-crema); color: var(--cat-tinta); border-radius: 999px; min-width: 1.5rem; padding: 0 .4rem; font-weight: 600; font-variant-numeric: tabular-nums; } .cat-lista { list-style: none; margin: 0 0 1.2rem; padding: 0; max-height: 34vh; overflow: auto; } .cat-lista li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid var(--cat-linea); font-size: .88rem; } .cat-lista img { width: 40px; height: 40px; object-fit: contain; background: #fff; border: 1px solid var(--cat-linea); } .cat-lista .quitar { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--cat-suave); font-size: 1.1rem; } .cat-lista .quitar:hover { color: #b32d2d; } .cat-form label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cat-suave); margin-bottom: .3rem; display: block; } .cat-form .form-control { background: #fff; border: 1px solid var(--cat-linea); border-radius: 3px; padding: .65rem .8rem; font-size: .92rem; color: var(--cat-tinta); } .cat-form .form-control:focus { border-color: var(--cat-tinta); box-shadow: none; } .cat-aviso { padding: .9rem 1.1rem; border-radius: 4px; font-size: .9rem; } .cat-aviso.ok { background: #e4efe2; color: #1e5c33; } .cat-aviso.ko { background: #f6e3e3; color: #8c2626; } /* ── Adaptación a pantallas pequeñas ───────────────────────────── */ @media (max-width: 991.98px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1.2rem; } .cat-card h3 { font-size: .95rem; } .cat-fab { right: 1rem; bottom: 1rem; } .cat-drop-menu { min-width: 0; width: min(24rem, calc(100vw - 2.5rem)); } } @media (max-width: 479.98px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .9rem; } .cat-card h3 { font-size: .88rem; } /* En pantallas estrechas el de arriba también va centrado */ .cat-paginacion.arriba { justify-content: center; } .cat-pag-btn { padding: .35rem .4rem; } .cat-pag-btn.flecha:first-child { margin-right: .35rem; } .cat-pag-btn.flecha:last-child { margin-left: .35rem; } }