/* ========================================================================== Estilos visuales configurables — personalización web multi-establecimiento ========================================================================== */ /* ---- Fuentes dinámicas (via CSS custom properties en ) ---- */ .font-hero { font-family: var(--font-hero, inherit) !important; } .font-secciones, .section-title.font-secciones { font-family: var(--font-secciones, inherit) !important; } /* ----------------------------------------------------------------------- SELECTOR DE ESTABLECIMIENTO ----------------------------------------------------------------------- */ /* Selector base (dropdown) */ .selector-establecimiento .est-selector { padding: 10px 20px; font-size: 1rem; border: 2px solid var(--primary-color, #2563eb); border-radius: 8px; background: white; color: #333; min-width: 250px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .selector-establecimiento .est-selector:focus { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); } /* Dropdown — rounded */ .selector-establecimiento[data-estilo="rounded"] .est-selector { border-radius: 50px; padding: 10px 24px; } /* Dropdown — outlined */ .selector-establecimiento[data-estilo="outlined"] .est-selector { border-width: 2px; background: transparent; } /* Tabs base */ .est-tabs .est-tab { padding: 10px 24px; font-size: 0.95rem; font-weight: 500; cursor: pointer; border: none; background: transparent; color: #666; transition: all 0.25s ease; position: relative; } /* Tabs — underline */ .selector-establecimiento[data-estilo="default"] .est-tab, .selector-establecimiento[data-estilo="underline"] .est-tab { border-bottom: 3px solid transparent; } .selector-establecimiento[data-estilo="default"] .est-tab.active, .selector-establecimiento[data-estilo="underline"] .est-tab.active { color: var(--primary-color, #2563eb); border-bottom-color: var(--primary-color, #2563eb); } /* Tabs — pills */ .selector-establecimiento[data-estilo="pills"] .est-tab { border-radius: 50px; padding: 8px 20px; } .selector-establecimiento[data-estilo="pills"] .est-tab.active { background: var(--primary-color, #2563eb); color: white; } /* Tabs — bordered */ .selector-establecimiento[data-estilo="bordered"] .est-tab { border: 1px solid #ddd; border-radius: 8px; margin: 0 2px; } .selector-establecimiento[data-estilo="bordered"] .est-tab.active { border-color: var(--primary-color, #2563eb); background: var(--primary-bg, rgba(37, 99, 235, 0.05)); color: var(--primary-color, #2563eb); } /* Tabs — minimal */ .selector-establecimiento[data-estilo="minimal"] .est-tab { font-size: 0.9rem; padding: 6px 16px; opacity: 0.6; } .selector-establecimiento[data-estilo="minimal"] .est-tab.active { opacity: 1; font-weight: 600; color: var(--primary-color, #2563eb); } /* ======================================================================= ESTILOS DE GALERÍA ======================================================================= */ /* Fix global: caption no debe bloquear clics en los links de la galería */ .grid-gallery-caption { pointer-events: none; } .grid-gallery-item a { display: block; position: relative; z-index: 1; } /* scattered (default) — rotación aleatoria (se aplica en JS) */ [data-galeria-estilo="scattered"] .grid-gallery-item { border-radius: 4px; overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; } [data-galeria-estilo="scattered"] .grid-gallery-item:hover { transform: rotate(0deg) scale(1.03) !important; box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.25); z-index: 2; } /* grid — rejilla ordenada sin rotación */ [data-galeria-estilo="grid"] .grid-gallery-item { transform: none !important; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } [data-galeria-estilo="grid"] .grid-gallery-item:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } /* polaroid — efecto foto instantánea */ [data-galeria-estilo="polaroid"] .grid-gallery-item { background: white; padding: 8px 8px 32px 8px; border-radius: 2px; box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.18); transition: transform 0.3s ease; } [data-galeria-estilo="polaroid"] .grid-gallery-item img { border-radius: 0; } [data-galeria-estilo="polaroid"] .grid-gallery-caption { font-style: italic; padding-top: 8px; font-size: 0.85rem; color: #555; } [data-galeria-estilo="polaroid"] .grid-gallery-item:hover { transform: rotate(0deg) scale(1.02) !important; } /* shadow — sombras dramáticas */ [data-galeria-estilo="shadow"] .grid-gallery-item { transform: none !important; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); transition: transform 0.3s ease, box-shadow 0.3s ease; } [data-galeria-estilo="shadow"] .grid-gallery-item:hover { transform: translateY(-8px) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); } /* masonry-clean — limpio sin rotación ni sombra excesiva */ [data-galeria-estilo="masonry-clean"] .grid-gallery-item { transform: none !important; border-radius: 0; overflow: hidden; box-shadow: none; transition: opacity 0.3s ease; } [data-galeria-estilo="masonry-clean"] .grid-gallery-item:hover { opacity: 0.9; } [data-galeria-estilo="masonry-clean"] .grid-gallery-caption { display: none; } /* ----------------------------------------------------------------------- ESTILOS DE SERVICIOS ----------------------------------------------------------------------- */ /* cards — icon-top (default) */ [data-servicio-modo="cards"] .service-card { text-align: center; } /* cards — icon-left */ [data-servicio-modo="cards"][data-servicio-estilo="icon-left"] .service-card { display: flex; align-items: flex-start; text-align: left; gap: 16px; } [data-servicio-modo="cards"][data-servicio-estilo="icon-left"] .service-card i { flex-shrink: 0; margin-bottom: 0; } /* cards — bordered */ [data-servicio-modo="cards"][data-servicio-estilo="bordered"] .service-card { border: 2px solid var(--primary-color, #2563eb); border-radius: 12px; box-shadow: none; } /* list mode — layout override */ [data-servicio-modo="list"] .est-servicios-pane .grid { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; max-width: 600px; margin: 0 auto; gap: 4px !important; } [data-servicio-modo="list"] .service-card { display: flex !important; align-items: center; gap: 12px; padding: 10px 16px !important; background: transparent !important; box-shadow: none !important; text-align: left !important; border: none !important; border-radius: 0 !important; overflow: visible !important; position: relative; } /* Neutralizar decoraciones de temas en modo lista */ [data-servicio-modo="list"] .service-card::before { content: none !important; display: none !important; } [data-servicio-modo="list"] .service-card::after { content: none !important; display: none !important; } [data-servicio-modo="list"] .service-card h3 { font-size: 1rem; margin-bottom: 0; padding-bottom: 0 !important; display: inline !important; } [data-servicio-modo="list"] .service-card h3::after { content: none !important; display: none !important; } [data-servicio-modo="list"] .service-card p { display: none !important; } [data-servicio-modo="list"] .service-card:hover { transform: none !important; box-shadow: none !important; } /* Icono base en modo lista: pequeño e inline */ [data-servicio-modo="list"] .service-card > i { display: inline-block !important; font-size: 1.1rem !important; margin-bottom: 0 !important; flex-shrink: 0; color: var(--primary-color, #2563eb); order: -1; } /* list — checkmark: ocultar icono, poner ✓ */ [data-servicio-modo="list"][data-servicio-estilo="checkmark"] .service-card > i { display: none !important; } [data-servicio-modo="list"][data-servicio-estilo="checkmark"] .service-card h3::before { content: '✓' !important; display: inline !important; font-size: 1.1rem; font-weight: 700; color: var(--primary-color, #16a34a); margin-right: 10px; } /* list — bullet: ocultar icono, poner • */ [data-servicio-modo="list"][data-servicio-estilo="bullet"] .service-card > i { display: none !important; } [data-servicio-modo="list"][data-servicio-estilo="bullet"] .service-card h3::before { content: '•' !important; display: inline !important; font-size: 1.4rem; line-height: 1; color: var(--primary-color, #2563eb); margin-right: 10px; } /* list — plain: solo texto, sin marcador */ /* ----------------------------------------------------------------------- DESCRIPCIÓN DEL ESTABLECIMIENTO ----------------------------------------------------------------------- */ .descripcion-contenido { font-size: 1.05rem; line-height: 1.75; color: #444; } .descripcion-contenido h3 { font-size: 1.3rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; } .descripcion-contenido p { margin-bottom: 1rem; } .descripcion-contenido ul, .descripcion-contenido ol { text-align: left; padding-left: 1.5rem; margin-bottom: 1rem; } .descripcion-contenido a { color: var(--primary-color, #2563eb); text-decoration: underline; } /* ----------------------------------------------------------------------- HELPER: d-none (Bootstrap-compatible) ----------------------------------------------------------------------- */ .d-none { display: none !important; } /* ======================================================================= FONDOS DE SECCIÓN (section-bg) Se activan con data-bg-estilo + data-bg-tema en ======================================================================= */ /* Base: posición relativa para pseudo-overlay */ [data-bg-estilo]:not([data-bg-estilo=""]):not([data-bg-estilo="none"]) .section-bg { position: relative; } /* Contenido por encima del overlay */ [data-bg-estilo]:not([data-bg-estilo=""]):not([data-bg-estilo="none"]) .section-bg > * { position: relative; z-index: 1; } /* --- SÓLIDOS ---------------------------------------------------------- */ [data-bg-estilo="solid"][data-bg-tema="warm"] .section-bg { background-color: #fdf6ee; } [data-bg-estilo="solid"][data-bg-tema="cool"] .section-bg { background-color: #eef4fb; } [data-bg-estilo="solid"][data-bg-tema="neutral"] .section-bg { background-color: #f3f4f6; } [data-bg-estilo="solid"][data-bg-tema="sand"] .section-bg { background-color: #f5f0e1; } [data-bg-estilo="solid"][data-bg-tema="sage"] .section-bg { background-color: #ecf0e7; } [data-bg-estilo="solid"][data-bg-tema="slate"] .section-bg { background-color: #e8eaed; } /* --- DEGRADADOS ------------------------------------------------------- */ [data-bg-estilo="gradient"][data-bg-tema="sunset"] .section-bg { background: linear-gradient(135deg, #fdf6ee 0%, #fce4d6 50%, #fdf6ee 100%); } [data-bg-estilo="gradient"][data-bg-tema="ocean"] .section-bg { background: linear-gradient(135deg, #eef4fb 0%, #d6eaf8 50%, #eef4fb 100%); } [data-bg-estilo="gradient"][data-bg-tema="forest"] .section-bg { background: linear-gradient(135deg, #ecf0e7 0%, #d5e8d4 50%, #ecf0e7 100%); } [data-bg-estilo="gradient"][data-bg-tema="lavender"] .section-bg { background: linear-gradient(135deg, #f3eef8 0%, #e8dff5 50%, #f3eef8 100%); } [data-bg-estilo="gradient"][data-bg-tema="gold"] .section-bg { background: linear-gradient(135deg, #fdf6ee 0%, #f9e8b8 50%, #fdf6ee 100%); } [data-bg-estilo="gradient"][data-bg-tema="frost"] .section-bg { background: linear-gradient(135deg, #f0f4f8 0%, #dce8f0 50%, #f0f4f8 100%); } /* --- TEXTURAS (mosaico tileable) -------------------------------------- */ [data-bg-estilo="tiles"] .section-bg { background-repeat: repeat; background-size: 200px 200px; } [data-bg-estilo="tiles"] .section-bg::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.55); z-index: 0; } [data-bg-estilo="tiles"][data-bg-tema="burbujas"] .section-bg { background-image: url('/static/fondos-seccion/mosaicos/burbujas.webp'); } [data-bg-estilo="tiles"][data-bg-tema="piedras"] .section-bg { background-image: url('/static/fondos-seccion/mosaicos/piedras.webp'); } [data-bg-estilo="tiles"][data-bg-tema="paja"] .section-bg { background-image: url('/static/fondos-seccion/mosaicos/paja.webp'); } [data-bg-estilo="tiles"][data-bg-tema="agua"] .section-bg { background-image: url('/static/fondos-seccion/mosaicos/agua.webp'); } [data-bg-estilo="tiles"][data-bg-tema="madera"] .section-bg { background-image: url('/static/fondos-seccion/mosaicos/madera.webp'); } [data-bg-estilo="tiles"][data-bg-tema="arena"] .section-bg { background-image: url('/static/fondos-seccion/mosaicos/arena.webp'); } [data-bg-estilo="tiles"][data-bg-tema="hojas"] .section-bg { background-image: url('/static/fondos-seccion/mosaicos/hojas.webp'); } /* --- FOTOS ATENUADAS -------------------------------------------------- */ [data-bg-estilo="photo"] .section-bg { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } [data-bg-estilo="photo"] .section-bg::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.85); z-index: 0; } [data-bg-estilo="photo"][data-bg-tema="campo"] .section-bg { background-image: url('/static/fondos-seccion/fotos/campo.webp'); } [data-bg-estilo="photo"][data-bg-tema="playa"] .section-bg { background-image: url('/static/fondos-seccion/fotos/playa.webp'); } [data-bg-estilo="photo"][data-bg-tema="montana"] .section-bg { background-image: url('/static/fondos-seccion/fotos/montana.webp'); } [data-bg-estilo="photo"][data-bg-tema="piscina"] .section-bg { background-image: url('/static/fondos-seccion/fotos/piscina.webp'); } [data-bg-estilo="photo"][data-bg-tema="golf"] .section-bg { background-image: url('/static/fondos-seccion/fotos/golf.webp'); } [data-bg-estilo="photo"][data-bg-tema="ciudad"] .section-bg { background-image: url('/static/fondos-seccion/fotos/ciudad.webp'); } [data-bg-estilo="photo"][data-bg-tema="nieve"] .section-bg { background-image: url('/static/fondos-seccion/fotos/nieve.webp'); } /* --- TEXTURAS FOTOGRÁFICAS -------------------------------------------- */ [data-bg-estilo="texture"] .section-bg { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } [data-bg-estilo="texture"] .section-bg::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.45); z-index: 0; } [data-bg-estilo="texture"][data-bg-tema="antiguo"] .section-bg { background-image: url('/static/fondos-seccion/texturas/antiguo.webp'); } [data-bg-estilo="texture"][data-bg-tema="madera-oscura"] .section-bg { background-image: url('/static/fondos-seccion/texturas/madera-oscura.webp'); } [data-bg-estilo="texture"][data-bg-tema="cuadros-gris"] .section-bg { background-image: url('/static/fondos-seccion/texturas/cuadros-gris.webp'); } [data-bg-estilo="texture"][data-bg-tema="piedra-geometrica"] .section-bg { background-image: url('/static/fondos-seccion/texturas/piedra-geometrica.webp'); } [data-bg-estilo="texture"][data-bg-tema="hexagono-marmol"] .section-bg { background-image: url('/static/fondos-seccion/texturas/hexagono-marmol.webp'); } [data-bg-estilo="texture"][data-bg-tema="muro-piedra"] .section-bg { background-image: url('/static/fondos-seccion/texturas/muro-piedra.webp'); } [data-bg-estilo="texture"][data-bg-tema="terrazo"] .section-bg { background-image: url('/static/fondos-seccion/texturas/terrazo.webp'); } [data-bg-estilo="texture"][data-bg-tema="tela"] .section-bg { background-image: url('/static/fondos-seccion/texturas/tela.webp'); } [data-bg-estilo="texture"][data-bg-tema="madera-calida"] .section-bg { background-image: url('/static/fondos-seccion/texturas/madera-calida.webp'); } [data-bg-estilo="texture"][data-bg-tema="madera-clara"] .section-bg { background-image: url('/static/fondos-seccion/texturas/madera-clara.webp'); }