/* ============================================================================= INTUR Establecimientos 2.1 — Estilos frontend Tipografía: Safiro (embebida) · Color principal: #E3007A ========================================================================== */ @font-face { font-family: 'Safiro'; src: url('../fonts/safiro-regular-webfont.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('../fonts/safiro-regularitalic-webfont.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('../fonts/safiro-medium-webfont.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('../fonts/safiro-mediumitalic-webfont.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('../fonts/safiro-semibold-webfont.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('../fonts/safiro-semibolditalic-webfont.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('../fonts/safiro-bold-webfont.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('../fonts/safiro-bolditalic-webfont.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } /* Variables — definidas también en el modal porque al usar portal pattern queda fuera del wrapper en el y perdería acceso a las CSS variables. */ .intur-est-wrapper, .intur-est-modal, .intur-widget-galeria, .intur-widget-mapa, .intur-widget-contacto, .intur-widget-ficha { --intur-accent: #E3007A; --intur-accent-hover: #b3005f; --intur-text: #0f0f0f; --intur-text-muted: #6b6b6b; --intur-bg: #f4f4f3; --intur-card-bg: #ffffff; --intur-border: #e5e5e5; --intur-radius-lg: 24px; --intur-radius-md: 14px; --intur-radius-sm: 10px; font-family: 'Safiro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--intur-text); box-sizing: border-box; } .intur-est-wrapper *, .intur-est-wrapper *::before, .intur-est-wrapper *::after { box-sizing: border-box; } /* Listado */ .intur-est-wrapper { position: relative; } /* Header (solo título, full width) */ .intur-est-header { margin-bottom: 24px; } .intur-est-title { font-family: 'Safiro', sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.01em; margin: 0; line-height: 1.05; } /* Fila de acciones en mobile/tablet: [buscador][botón filtros] */ .intur-est-mobile-actions { display: none; align-items: center; gap: 12px; margin-bottom: 24px; } .intur-est-mobile-actions .intur-est-search-wrap { flex: 1; margin: 0; } .intur-est-mobile-filter-btn { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--intur-text); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--intur-text); padding: 0; transition: background 0.15s ease, color 0.15s ease; } .intur-est-mobile-filter-btn svg { width: 22px; height: 22px; } .intur-est-mobile-filter-btn:hover { background: var(--intur-text); color: #fff; } /* Layout */ .intur-est-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; } .intur-est-sidebar { position: sticky; top: 24px; align-self: start; } @media (max-width: 980px) { .intur-est-layout { grid-template-columns: 1fr; gap: 24px; } .intur-est-sidebar { display: none; } .intur-est-mobile-actions { display: flex; } } /* Filtros */ .intur-est-filters { display: flex; flex-direction: column; gap: 24px; } .intur-est-filter-groups { display: flex; flex-direction: column; gap: 18px; } /* Buscador — blindado contra estilos de tema */ .intur-est-search-wrap { position: relative !important; display: flex !important; align-items: center; background: transparent !important; box-shadow: none !important; } .intur-est-search { width: 100% !important; padding: 16px 64px 16px 22px !important; border: 1px solid #d8d8d8 !important; border-radius: 999px !important; background: #ffffff !important; background-color: #ffffff !important; color: var(--intur-text) !important; font-family: inherit !important; font-weight: 400 !important; font-size: 15px !important; line-height: 1.4 !important; outline: none !important; box-shadow: none !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; height: auto !important; min-height: 0 !important; margin: 0 !important; } .intur-est-search::placeholder { color: #9a9a9a !important; font-weight: 400 !important; opacity: 1 !important; } .intur-est-search:hover { border-color: #b0b0b0 !important; } .intur-est-search:focus, .intur-est-search:focus-visible { border-color: var(--intur-accent) !important; box-shadow: 0 0 0 3px rgba(227, 0, 122, 0.08) !important; outline: none !important; } .intur-est-search-btn { position: absolute !important; right: 5px !important; top: 50% !important; transform: translateY(-50%) !important; width: 46px !important; height: 46px !important; border-radius: 50% !important; background: var(--intur-accent) !important; background-color: var(--intur-accent) !important; color: #fff !important; border: none !important; cursor: pointer; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } .intur-est-search-btn svg { width: 18px !important; height: 18px !important; } .intur-est-search-btn:hover, .intur-est-search-btn:focus { background: var(--intur-accent-hover) !important; background-color: var(--intur-accent-hover) !important; color: #fff !important; } .intur-est-filter-group h4 { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 500; color: var(--intur-text-muted); margin: 0 0 12px 0; } .intur-est-filter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .intur-est-filter-list li { margin: 0; padding: 0; } .intur-est-filter-list label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 1.35; color: var(--intur-text); /* Padding interno = touch target sin gastar espacio entre items */ padding: 7px 0; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } /* Visualmente oculto pero clickable en iOS Safari. NO usar pointer-events:none — rompe label→input en iOS. */ .intur-est-filter-list input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .intur-est-radio-visual { width: 18px; height: 18px; border: 1.5px solid #b0b0b0; border-radius: 50%; flex-shrink: 0; position: relative; margin-top: 2px; transition: border-color 0.15s ease; } .intur-est-filter-list input[type="radio"]:checked + .intur-est-radio-visual, .intur-est-filter-list label.is-checked .intur-est-radio-visual { border-color: var(--intur-accent); } .intur-est-filter-list input[type="radio"]:checked + .intur-est-radio-visual::after, .intur-est-filter-list label.is-checked .intur-est-radio-visual::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--intur-accent); } .intur-est-filter-list input[type="radio"]:focus-visible + .intur-est-radio-visual { outline: 2px solid var(--intur-accent); outline-offset: 2px; } .intur-est-filter-text { flex: 1; font-weight: 500; /* count flows inline at the end del texto */ } .intur-est-filter-count { color: #a0a0a0; font-weight: 400; font-size: 13px; margin-left: 2px; white-space: nowrap; } /* Botón "Borrar filtros": estilo enlace, blindado contra overrides del tema */ .intur-est-clear-filters { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; color: var(--intur-text-muted) !important; text-decoration: underline !important; font-family: inherit !important; font-size: 14px !important; cursor: pointer; align-self: flex-start; /* Touch target generoso para mobile (Apple recomienda 44px) */ padding: 12px 4px !important; min-height: 44px; margin: 0; line-height: 1.5; text-transform: none; letter-spacing: normal; -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; } .intur-est-clear-filters:hover, .intur-est-clear-filters:focus, .intur-est-clear-filters:active { background: transparent !important; background-color: transparent !important; color: var(--intur-accent) !important; box-shadow: none !important; text-decoration: underline !important; } /* Modal de filtros — z-index máximo + portal pattern para estar SIEMPRE encima del header */ .intur-est-modal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; background: #fff !important; z-index: 2147483647 !important; /* int32 max — imposible que algo lo tape */ display: flex !important; flex-direction: column !important; isolation: isolate; transform: none !important; filter: none !important; } .intur-est-modal[hidden] { display: none !important; } /* Botón cerrar (×) flotante en la esquina superior derecha del modal */ .intur-est-modal-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2; width: 50px; /* 10% menos que antes (56→50) */ height: 50px; border-radius: 50%; border: 1.5px solid var(--intur-text); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--intur-text); padding: 0; transition: background 0.15s ease, color 0.15s ease; } .intur-est-modal-close svg { width: 20px; height: 20px; } .intur-est-modal-close:hover { background: var(--intur-text); color: #fff; } .intur-est-modal-body { flex: 1 1 auto; min-height: 0; /* CRÍTICO: sin esto el flex item no shrinkea y overflow:auto nunca activa scroll */ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* Padding-top extra para que la primera fila no quede tapada por el botón cerrar flotante */ padding: calc(env(safe-area-inset-top) + 80px) 24px 24px; } .intur-est-modal-footer { padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--intur-border); } .intur-est-modal-apply { width: 100%; padding: 16px; border: none; background: var(--intur-accent); color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; border-radius: 999px; cursor: pointer; } .intur-est-modal-apply:hover { background: var(--intur-accent-hover); } /* Grid */ .intur-est-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media (max-width: 980px) { .intur-est-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 760px) { .intur-est-grid { grid-template-columns: 1fr; } } .intur-est-empty, .intur-est-empty-results { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--intur-text-muted); background: var(--intur-bg); border-radius: var(--intur-radius-md); } /* Card */ .intur-est-card { transition: transform 0.25s ease; } .intur-est-card[hidden] { display: none; } .intur-est-card-link { display: block; text-decoration: none; color: inherit; } .intur-est-card-image { position: relative; aspect-ratio: 1 / 1; /* 20% más bajas que la versión anterior (era 4/5) */ overflow: hidden; border-radius: var(--intur-radius-lg); background: #ddd; } @media (max-width: 760px) { .intur-est-card-image { aspect-ratio: 16 / 10; } /* mobile: 50% más bajas que la versión anterior */ } .intur-est-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .intur-est-card:hover .intur-est-card-image img { transform: scale(1.04); } .intur-est-card-name { font-family: 'Safiro', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--intur-text); margin: 16px 0 0 0; display: block; } .intur-est-card-arrow { display: inline-flex; width: 24px; height: 24px; margin-left: 8px; vertical-align: -4px; color: var(--intur-text); transition: transform 0.2s ease; } .intur-est-card-arrow svg { width: 100%; height: 100%; display: block; } .intur-est-card:hover .intur-est-card-arrow { transform: translateX(6px); } /* Paginación */ .intur-est-pagination { margin-top: 72px; display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; width: 100%; } /* Blindaje contra temas que sobreescriben display y mantienen la paginación visible */ .intur-est-pagination[hidden], .intur-est-empty-results[hidden], .intur-est-grid[hidden] { display: none !important; } /* Cuando no hay resultados, asegurar que el empty-results ocupe todo el ancho */ .intur-est-empty-results { width: 100%; text-align: center; padding: 60px 20px; color: var(--intur-text-muted); background: var(--intur-bg); border-radius: var(--intur-radius-md); margin: 0; } .intur-est-pagination button { background: transparent; border: 1px solid var(--intur-text); color: var(--intur-text); padding: 16px 32px; border-radius: 999px; font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .intur-est-pagination button:hover:not(:disabled) { background: var(--intur-text); color: #fff; } .intur-est-pagination button:disabled { opacity: 0.35; cursor: not-allowed; } .intur-est-pageinfo { font-size: 15px; color: var(--intur-text-muted); font-weight: 500; } @media (max-width: 760px) { .intur-est-pagination { margin-top: 48px; gap: 16px; } .intur-est-pagination button { padding: 14px 24px; font-size: 14px; } } /* Widgets Elementor */ .intur-widget-galeria-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 40px; } /* Mientras carga, mostrar un esqueleto sutil en lugar del texto "Cargando..." */ .intur-widget-galeria[data-state="loading"] .intur-widget-galeria-grid::before { content: ''; grid-column: 1 / -1; height: 120px; background: linear-gradient(90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%); background-size: 200% 100%; animation: intur-skeleton 1.4s ease infinite; border-radius: 10px; } @keyframes intur-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .intur-widget-galeria[data-state="empty"] .intur-widget-galeria-grid, .intur-widget-galeria[data-state="loaded"] .intur-widget-galeria-grid { min-height: 0; } .intur-widget-galeria[data-state="empty"] .intur-widget-galeria-grid::before, .intur-widget-galeria[data-state="loaded"] .intur-widget-galeria-grid::before { display: none; } .intur-widget-galeria-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--intur-radius-sm); cursor: pointer; background: #eee; transition: opacity 0.2s; } .intur-widget-galeria-grid img:hover { opacity: 0.85; } /* Las columnas responsive las controla el control responsive de Elementor desde el widget */ .intur-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); display: none; align-items: center; justify-content: center; z-index: 100000; } .intur-lightbox.is-open { display: flex; } .intur-lightbox-img { max-width: 92vw; max-height: 92vh; object-fit: contain; } .intur-lightbox-close, .intur-lightbox-prev, .intur-lightbox-next { position: absolute; background: rgba(255,255,255,0.15); color: #fff; border: none; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .intur-lightbox-close { top: 20px; right: 20px; font-size: 24px; } .intur-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); font-size: 28px; } .intur-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); font-size: 28px; } .intur-widget-mapa iframe { width: 100%; border: 0; border-radius: var(--intur-radius-md); display: block; } .intur-widget-mapa-empty { padding: 40px; background: var(--intur-bg); color: var(--intur-text-muted); text-align: center; border-radius: var(--intur-radius-md); } .intur-widget-contacto { display: flex; flex-wrap: wrap; gap: 10px; } .intur-contact-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: var(--intur-bg); color: var(--intur-text); border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 14px; line-height: 1; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .intur-contact-btn:hover { background: var(--intur-accent); color: #fff; transform: translateY(-1px); } .intur-contact-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex-shrink: 0; } .intur-contact-icon svg { width: 19px; height: 19px; display: block; } .intur-contact-label { display: inline-flex; align-items: center; line-height: 1.2; } .intur-widget-contacto--icons .intur-contact-btn { width: 48px; height: 48px; padding: 0; border-radius: 50%; justify-content: center; } .intur-widget-contacto--icons .intur-contact-icon svg { width: 21px; height: 21px; } .intur-widget-ficha { margin: 0; display: flex; flex-direction: column; gap: 0; } .intur-ficha-row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--intur-border); align-items: baseline; } .intur-widget-ficha--stacked .intur-ficha-row { grid-template-columns: 1fr; gap: 4px; } .intur-ficha-row:last-child { border-bottom: none; } .intur-widget-ficha dt { color: var(--intur-text-muted); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } .intur-widget-ficha dd { margin: 0; color: var(--intur-text); font-weight: 500; } /* ============================================================ Badge de categoría (estrellas / tenedores / tazas / copas) ============================================================ */ .intur-est-cat-badge { display: inline-flex; align-items: center; gap: 2px; line-height: 1; color: var(--intur-accent, #E3007A); } .intur-est-cat-badge svg { width: 13px; height: 13px; display: block; fill: currentColor; flex: 0 0 auto; } .intur-est-cat-badge--pill { background: rgba(255, 255, 255, 0.94); padding: 6px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } /* Superpuesto sobre la foto de las cards (listados y catálogo) */ .intur-est-card-image .intur-est-cat-badge { position: absolute; top: 12px; left: 12px; z-index: 2; } /* Widget "Categoría INTUR (iconos)" */ .intur-widget-cat-badge { display: flex; align-items: center; gap: 10px; } .intur-cat-badge-text { color: var(--intur-text, #0f0f0f); font-weight: 500; line-height: 1.2; } @media (prefers-reduced-motion: reduce) { .intur-est-card, .intur-est-card-image img, .intur-est-card-arrow { transition: none !important; } }