/* Ficha de empresa y página de oferta (Pages/Company.cshtml), con la forma de las piezas WebEmpresa y WebFitxa del diseño
   de la versión nueva (DOCS/referencia-diseno): la ruta arriba y dos columnas. Oferta: fotos, pestañas y «On és» | la oferta
   y el contacto. Ficha: fotos y descripción | la empresa y «On és». Las ofertas de la empresa, debajo de todo.
   Tarjetas blancas con borde fino y radio 20, títulos en Manrope sin subrayado. Solo cómo se enseña: mismos datos y textos.
   Los colores, de web.css (:root) */

.company-page { display: flex; flex-direction: column; gap: 28px; padding-top: 20px; padding-bottom: 56px; }
.company-page::before, .company-page::after { display: none; }   /* el clearfix de .container de Bootstrap contaría como un bloque más */
.company-page h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.company-page .notice { margin: 0; }
.company-page .notice h2 { font-size: 30px; }   /* el aviso de «no disponible» lleva su tamaño, no el de los títulos de la ficha */
.company-page .banner-filters { margin: 4px 0 0; }

/* ---------- Ruta: Inici › Categoria › Comarca › Empresa ---------- */
.company-page-route ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.company-page-route li + li::before { content: "›"; margin: 0 8px; color: var(--muted); }
.company-page-route a, .company-page-route a:visited { color: var(--muted); text-decoration: none; }
.company-page-route a:hover, .company-page-route a:focus { color: var(--primary); text-decoration: underline; }
.company-page-route [aria-current] { color: var(--text); }

/* ---------- Dos columnas (7 | 5) que bajan cada una por su lado: sin filas, no quedan huecos entre bloques. En la ficha, cada
   bloque va a la columna más corta (Company.cshtml); lo largo (la descripción, las pestañas) tiene una altura máxima y su propio
   scroll. En la oferta y la novedad, el contacto acompaña al bajar ---------- */
.company-page-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: stretch; }
.company-page-cols.single-column { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.company-page-column { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
/* (con las dos clases: .company-page-card, más abajo, pone position: relative para el botón de copiar) */
@media (min-width: 992px) {
    .company-page-card.company-page-contact-box { position: sticky; top: 94px; }
}

/* ---------- Cajas con una altura máxima y su propio scroll (descripción de la empresa y pestañas de la oferta). Con más texto
   del que cabe, se funde abajo hasta llegar al final (js/company-page.js pone «mes-avall») ---------- */
.company-page-scroll { max-height: 320px; overflow-y: auto; padding-right: 10px; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.company-page-scroll.further-down { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
                            mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); }
.company-page-scroll:focus-visible { outline-offset: 4px; }

/* ---------- Visor de fotos: la grande (con flechas y «1 / 6») y las miniaturas ---------- */
.company-page-viewer { display: flex; flex: none; flex-direction: column; gap: 12px; min-width: 0; }
.company-page-viewer-large { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 20px; }
.company-page-viewer-large img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 10px; object-fit: contain; transition: transform .2s; }
/* Arrastrar la foto (js/company-page.js): en el móvil, el dedo en vertical sigue desplazando la página */
.company-page-viewer-large { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.company-page-viewer-large.is-dragging { cursor: grabbing; }
.company-page-viewer-large.is-dragging img { transition: none; }
.company-page-viewer-arrow { position: absolute; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
                      margin-top: -21px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--text);
                      box-shadow: 0 2px 8px rgba(20, 33, 58, .22); cursor: pointer; }
.company-page-viewer-arrow:hover, .company-page-viewer-arrow:focus { background: #fff; color: var(--primary); }
.company-page-viewer-arrow.previous { left: 14px; }
.company-page-viewer-arrow.next { right: 14px; }
.company-page-viewer-arrow .ico { width: 20px; height: 20px; vertical-align: 0; }
.company-page-viewer-account { position: absolute; right: 14px; bottom: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94);
                      box-shadow: 0 1px 4px rgba(20, 33, 58, .18); font-size: 13px; font-weight: 600; color: var(--text); }
.company-page-viewer-mini { position: relative; display: flex; gap: 10px; margin: 0; padding: 2px 2px 6px; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; }
.company-page-viewer-mini li { flex: 0 0 calc((100% - 40px) / 5); scroll-snap-align: start; }
.company-page-viewer-mini a { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.company-page-viewer-mini a:hover { border-color: var(--primary); }
.company-page-viewer-mini a.current { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.company-page-viewer-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Tarjetas: la de la oferta, la de la empresa y la del contacto ---------- */
.company-page-card { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 26px; background: #fff; border: 1px solid var(--border); border-radius: 20px; }
.company-page-company { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* Copiar el enlace: arriba a la derecha de la tarjeta de la oferta y de la empresa; al copiar, la marca y «Enllaç copiat» */
.company-page-card { position: relative; }
.company-page-offer > .company-page-company, .company-page-details > .company-page-company { padding-right: 50px; }
.company-page-copy { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
               padding: 0; border: 1px solid var(--border-2); border-radius: 10px; background: #fff; color: var(--primary); cursor: pointer; }
.company-page-copy:hover, .company-page-copy:focus-visible { border-color: var(--primary); background: var(--primary-bg); }
.company-page-copy .ico { width: 19px; height: 19px; vertical-align: 0; }
.company-page-copy .ico-done, .company-page-copy.copied .ico-link { display: none; }
.company-page-copy.copied .ico-done { display: block; }
.company-page-copy-notice { position: absolute; top: calc(100% + 6px); right: 0; z-index: 2; padding: 4px 10px; border-radius: 8px; background: var(--text);
                    color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.company-page-copy.notifying .company-page-copy-notice { opacity: 1; }
.company-page-company > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.company-page-logo { flex: none; width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.company-page-company-name, .company-page-company-name:visited { color: var(--text); font: 800 18px/1.25 var(--heading); text-decoration: none; overflow-wrap: anywhere; }
.company-page-company-name:hover, .company-page-company-name:focus { color: var(--primary); text-decoration: underline; }
.company-page-name { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; }
.company-page-subtitle { font-size: 14px; color: var(--muted); }
.company-page-title { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; }
.company-page-discount { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 10px;
             background: var(--maroon); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.35; }
/* Empresa sin propietario (WebEmpresa, «Sense propietari»): en su tarjeta, «Encara no ofereix avantatges a funcionaris.cat» en
   una caja de borde discontinuo; después de «On és», «És la teva empresa?» en azul oscuro con el botón dorado */
.company-page-no-advantages { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; border-radius: 12px;
                          background: var(--background); border: 1px dashed var(--border-2); }
.company-page-no-advantages strong { font-size: 15px; color: var(--text); }
.company-page-no-advantages span { font-size: 14px; line-height: 1.45; color: var(--muted); }
.company-page-no-advantages .btn { display: inline-flex; align-items: center; height: 40px; margin-top: 4px; padding: 0 14px; border-radius: 9px; font-weight: 600; }
.company-page-claim { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; border-radius: 18px; background: var(--text); color: #fff; }
.company-page .company-page-claim h2 { margin: 0; font-size: 19px; font-weight: 800; color: #fff; }
.company-page-claim p { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.company-page-claim-button, .company-page-claim-button:visited { display: inline-flex; align-items: center; height: 42px; margin-top: 4px; padding: 0 16px; border-radius: 10px;
                                                   background: var(--gold); border-color: var(--gold); color: var(--text); font-weight: 600; }
.company-page-claim-button:hover, .company-page-claim-button:focus { background: #fff; border-color: #fff; color: var(--text); }
.company-page-claim-notice, .company-page-claim-notice:visited { font-size: 14px; color: #fff; text-decoration: underline; }
.company-page-claim-notice:hover, .company-page-claim-notice:focus { color: var(--gold); }

/* «Explora més ofertes i promocions», debajo de las ofertas a prop de una empresa sin propietario */
.company-page-explore { margin: 20px 0 0; text-align: center; }
.company-page-explore .btn { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 10px; font-weight: 600; }

/* «També per a familiars directes» (database/005): debajo del descuento, en los colores de «sí» (--ok) */
.company-page-family { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px;
                 background: var(--ok-bg); color: var(--ok); font-size: 14px; font-weight: 600; line-height: 1.35; }
.company-page-family .ico { width: 18px; height: 18px; flex: none; }
.company-page-actions { display: flex; flex-direction: column; gap: 10px; }
.company-page-actions .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.company-page-actions .btn-default { height: 44px; }
.company-page-button-large { height: 52px; border-radius: 12px; font-size: 16px; }
.company-page-sign-up { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
.company-page-sign-up a { font-weight: 600; }
.company-page-note { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--background);
              font-size: 14px; line-height: 1.45; }
.company-page-note .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--primary); }
/* El cupón de una oferta en línia (con código): el código se ve al identificarse */
.company-page-coupon { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 2px dashed var(--gold);
              border-radius: 12px; background: var(--gold-bg); }
.company-page-coupon-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.company-page-coupon-label .ico { width: 20px; height: 20px; flex: none; }
.company-page-coupon-code { font: 800 18px/1 var(--heading); letter-spacing: .18em; color: var(--muted); }
.company-page-coupon-code.revealed { color: var(--text); letter-spacing: .08em; user-select: all; overflow-wrap: anywhere; }
/* El QR de la oferta (Pages/Shared/_OfferPass): la tarjeta, la cuenta atrás y el estado caducado (js/company-page.js) */
.company-page-actions form { display: flex; flex-direction: column; }   /* los botones dentro de un formulario, del ancho de la caja */
.pass-box { display: flex; flex-direction: column; gap: 10px; }
.company-page-offer:has(.pass) .company-page-note { display: none; }
.pass { display: flex; flex-direction: column; gap: 10px; }
.pass-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px 16px; border: 2px solid var(--text);
                 border-radius: 18px; background: #fff; color: var(--text); text-align: center; }
.pass-card:focus { outline: 0; }   /* el foco va aquí al generar el QR (js/company-page.js), para los lectores de pantalla: sin marco */
.pass-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pass-name { font: 800 20px/1.25 var(--heading); letter-spacing: -.01em; overflow-wrap: anywhere; }
.pass-nif { margin-top: -6px; font-size: 15px; }
.pass-nif b, .print-nif b { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 700; letter-spacing: .02em; }
.pass-qr { display: block; width: 100%; max-width: 236px; border-radius: 6px; transition: opacity .2s; }   /* un enlace a su validación */
.pass-qr svg { display: block; width: 100%; height: auto; }
.pass-time { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--ok-bg);
               color: var(--ok); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pass-time .ico { width: 17px; height: 17px; }
.pass-proof { font-size: 14px; font-weight: 600; }
.pass.count .pass-new { display: none; }
.pass.expired .pass-qr { opacity: .1; pointer-events: none; }
.pass.expired .pass-time { background: #fbeaec; color: var(--maroon); }
.pass-notice { margin: 0; }
@media (prefers-reduced-motion: reduce) { .pass-qr { transition: none; } }

/* La hoja impresa: solo al imprimir (sin JavaScript, en la caja). A4 sin márgenes del navegador: el margen lo pone la hoja */
.pass-full { display: none; flex-direction: column; gap: 6mm; box-sizing: border-box; background: #fff; color: var(--text);
              font: 400 10.5pt/1.5 var(--font); text-align: left; }
.pass-box .pass-full { display: flex; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.print-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm; padding-bottom: 4mm; border-bottom: 2px solid var(--text); }
.print-header .brand { font-size: 19pt; }
.print-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1mm; text-align: right; }
.print-type { font-size: 9pt; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.print-reference { font-size: 9.5pt; color: var(--muted); }
.print-label { font-size: 8pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.print-company { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7mm; }
.print-column { display: flex; flex-direction: column; gap: 1.2mm; font-size: 9.5pt; line-height: 1.5; overflow-wrap: anywhere; }
.print-contact { padding-top: 5mm; }
.print-name-company { margin-bottom: .5mm; font: 800 15pt/1.2 var(--heading); }
.print-soft { color: var(--muted); }
.print-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 2.5mm; }
.print-title { margin: 0; font: 800 18pt/1.2 var(--heading); letter-spacing: -.01em; }
.print-discount { padding: 1.6mm 3.2mm; border-radius: 2mm; background: var(--maroon); color: #fff; font-size: 11pt; font-weight: 700; }
.print-discount .ico { width: 1.1em; height: 1.1em; margin-right: 1.5mm; vertical-align: -0.15em; }
.print-family { font-size: 10pt; font-weight: 600; color: var(--ok); }
.print-text { margin: 0; font-size: 10.5pt; line-height: 1.55; }
.print-holder { display: grid; grid-template-columns: minmax(0, 1fr) 42mm; gap: 6mm; align-items: center; padding: 5mm 5.5mm; border: 2px solid var(--text);
              border-radius: 3mm; break-inside: avoid; }
.print-holder-details { display: flex; flex-direction: column; gap: 2mm; }
.print-name { font: 800 15pt/1.25 var(--heading); }
.print-nif { font-size: 10.5pt; }
.print-notice { margin-top: 1mm; padding: 2.6mm 3.2mm; border-radius: 2mm; background: var(--background); font-size: 10.5pt; font-weight: 600; line-height: 1.45; }
.print-qr { display: flex; flex-direction: column; align-items: center; gap: 1.5mm; text-align: center; font-size: 7.5pt; color: var(--muted); }
.print-qr-drawing { width: 42mm; }
.print-qr-drawing svg { display: block; width: 100%; height: auto; }
.print-terms { display: flex; flex-direction: column; gap: 1.5mm; break-inside: avoid; }
.print-terms p { margin: 0; font-size: 8.5pt; line-height: 1.55; color: #3a4456; }
.print-footer { display: flex; justify-content: space-between; align-items: center; gap: 6mm; margin-top: auto; padding-top: 3.5mm; border-top: 1px solid var(--border);
          font-size: 8pt; color: var(--muted); }
.print-footer img { width: 26mm; height: auto; }
@media print {
    @page { size: A4; margin: 0; }
    body.pass-printing { display: block; min-height: 0; background: #fff; }
    body.pass-printing > :not(.pass-full) { display: none !important; }
    body.pass-printing > .pass-full { display: flex; min-height: 296mm; padding: 13mm 15mm 11mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* Bootstrap 3 quita al imprimir los fondos y los colores: los de la hoja, otra vez */
    body.pass-printing .pass-full, body.pass-printing .pass-full .print-name-company, body.pass-printing .pass-full .print-title,
    body.pass-printing .pass-full .print-name, body.pass-printing .pass-full .print-text, body.pass-printing .pass-full .print-notice { color: #14213a !important; }
    body.pass-printing .pass-full .print-label, body.pass-printing .pass-full .print-reference, body.pass-printing .pass-full .print-soft,
    body.pass-printing .pass-full .print-qr, body.pass-printing .pass-full .print-footer { color: #4b5568 !important; }
    body.pass-printing .pass-full .print-terms p { color: #3a4456 !important; }
    body.pass-printing .pass-full .print-family { color: #1f7a4d !important; }
    body.pass-printing .pass-full .print-discount { background: #7e1f2e !important; color: #fff !important; }
    body.pass-printing .pass-full .print-notice { background: #f6f6f3 !important; }
}
/* La novedad: su etiqueta (no es un descuento: sin el granate) y su texto, y el enlace a la ficha */
.company-page-presentation-label { align-self: flex-start; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--primary-bg); color: var(--primary);
                          font-size: 14px; font-weight: 700; line-height: 1.35; }
.company-page-presentation-text { margin: 0; font-size: 16px; line-height: 1.6; }
.company-page-presentation-company-page { display: flex; align-items: center; justify-content: center; height: 44px; }
.company-page-contact-box { gap: 16px; padding: 24px; }
.company-page-contact-box h2 { font-size: 20px; }

/* Contacto: el valor con su icono; el horario debajo, separado por una raya fina */
.company-page-contact { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.company-page-contact li { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 15px; }
.company-page-contact li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.company-page-contact-ico { display: flex; flex: 0 0 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px;
                      background: var(--background); color: var(--primary); }
.company-page-hours { padding-top: 16px; border-top: 1px solid var(--border); }
.company-page-hours strong { display: block; margin-bottom: 6px; font-size: 15px; }
.company-page-hours p { margin: 0; font-size: 14.5px; line-height: 1.6; }

/* ---------- Pestañas de la oferta: Oferta, Empresa y Condicions generals ---------- */
.company-page-tabs { display: flex; flex-wrap: wrap; gap: 0 6px; border-bottom: 1px solid var(--border); }
.company-page-tab { height: 46px; margin-bottom: -1px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: none;
                  color: var(--muted); font-size: 15px; font-weight: 600; cursor: pointer; }
.company-page-tab:hover, .company-page-tab:focus { color: var(--text); }
.company-page-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); }
.company-page-info { display: flex; flex-direction: column; }
.company-page-tab-panels { margin-top: 18px; }
.company-page-tab-panel { font-size: 16px; line-height: 1.6; }
.company-page-tab-panel > p { margin: 0 0 12px; }
.company-page-terms { font-size: 15px; color: var(--muted); }
/* La descripción de la empresa: la de hoy es HTML (párrafos, listas, títulos) */
.description { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.description p, .description ul, .description ol, .description blockquote { margin: 0 0 10px; }
.description h3 { margin: 14px 0 8px; padding: 0; border: 0; font-size: 16px; }
.description h4 { margin: 12px 0 6px; font-size: 15px; }

/* ---------- On és: el mapa y las direcciones (con más de una, se elige aquí) ---------- */
.company-page-map { display: flex; flex-direction: column; gap: 14px; }
.company-page-map-frame { display: block; width: 100%; height: 300px; border: 1px solid var(--border); border-radius: 18px; background: #fff; }
.company-page-addresses { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.company-page-address, a.company-page-address:visited { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px;
                                        background: #fff; color: var(--text); font-size: 15px; line-height: 1.45; text-decoration: none; }
.company-page-address .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--primary); }
a.company-page-address:hover, a.company-page-address:focus { color: var(--text); border-color: var(--primary); text-decoration: none; }
a.company-page-address.current { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); font-weight: 600; }

/* ---------- Ofertas de la empresa y descripción ---------- */
.company-page-offers { display: flex; flex-direction: column; gap: 16px; }
.company-page-offers h2 { font-size: 24px; }
.company-page-no-offers { margin: 0; color: var(--muted); font-size: 15px; }
.company-page-description { gap: 14px; }
/* Debajo de las dos columnas, a todo lo ancho (Company.cshtml lo decide): entera, en dos columnas de texto */
.company-page-cols > .company-page-description.wide-box { grid-column: 1 / -1; }
@media (min-width: 992px) {
    .company-page-description.wide-box .description { columns: 2; column-gap: 44px; }
    .company-page-description.wide-box .description > * { break-inside: avoid; }
}
.company-page-description h2 { font-size: 20px; }

/* ---------- El sorteo de la empresa: su foto, qué se sortea, hasta cuándo y «Participa-hi» ---------- */
.company-page-raffle { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); overflow: hidden; background: #fff; border: 1px solid var(--border);
                 border-left: 4px solid var(--gold); border-radius: 20px; }
.company-page-raffle-photo { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.company-page-raffle-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 26px; }
.company-page-raffle-label { padding: 4px 10px; border-radius: 999px; background: var(--gold-bg); color: var(--text); font-size: 13px; font-weight: 700; }
.company-page .company-page-raffle h2 { margin: 0; font-size: 22px; }
.company-page-raffle p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.company-page .company-page-raffle .company-page-raffle-date { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }
.company-page-raffle-date .ico { width: 18px; height: 18px; color: var(--primary); }
.company-page-raffle .btn { display: inline-flex; align-items: center; height: 44px; margin-top: 4px; padding: 0 22px; border-radius: 10px; font-weight: 600; }
@media (max-width: 767px) {
    .company-page-raffle { grid-template-columns: minmax(0, 1fr); }
    .company-page-raffle-photo { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------- Móvil y tableta: una columna, en el orden del código ---------- */
/* (el orden: fotos, la oferta o la empresa, pestañas o descripción, mapa y contacto; las columnas dejan de agrupar) */
@media (max-width: 991px) {
    .company-page { gap: 22px; }
    .company-page-cols, .company-page-cols.single-column { display: flex; flex-direction: column; align-items: stretch; gap: 22px; max-width: none; }
    .company-page-column { display: contents; }
    .company-page-viewer { order: 1; }
    .company-page-offer, .company-page-details { order: 2; }
    .company-page-info, .company-page-description { order: 3; }
    .company-page-map { order: 4; }
    .company-page-contact-box { order: 5; }
    .company-page-claim { order: 6; }   /* «És la teva empresa?», después de «On és» */
}
@media (max-width: 480px) {
    .company-page { padding-top: 14px; }
    .company-page-card, .company-page-contact-box { padding: 20px 18px; }
    .company-page-title, .company-page-name { font-size: 24px; }
    .company-page .notice h2 { font-size: 24px; }
    .company-page-logo { width: 56px; height: 56px; border-radius: 12px; }
    .company-page-viewer-mini li { flex-basis: calc((100% - 30px) / 4); }
    .company-page-viewer-arrow { width: 38px; height: 38px; margin-top: -19px; }
    .company-page-tab { padding: 0 11px; font-size: 14px; }
    .company-page-map-frame { height: 260px; }
}