@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap'); /* Código propio de este micrositio (no el HTML/CSS de la web original de la asociación), pero con SU logo real y colores que combinan con él: azul cielo, mostaza y marrón camello del logo, más el rosa empolvado que ya usaban en los botones de su web vieja. */ :root{ --crema:#faf9f6; --gris-claro:#f3f1ec; --texto:#332a20; --texto-suave:#75695c; --marron:#4a3826; --azul:#7fb4d9; --azul-suave:#eaf3f9; --mostaza:#e3c94a; --mostaza-suave:#faf3d9; --rosa:#c48b90; --rosa-oscuro:#a86d73; /* El mismo rosa, bajado hasta que un texto normal sobre blanco cumple AA: --rosa-oscuro se queda en 4,12 y hace falta 4,5. Se usa SOLO para texto (enlaces, contadores); para rellenos y filetes sigue mandando el de arriba, que es el de la marca. Sobre blanco 5,59; sobre mostaza 5,03. */ --rosa-texto:#925761; --gris-oscuro:#3d3226; --borde:#e8e2d5; --sombra:0 10px 30px -12px rgba(74,56,38,.16); --sombra-hover:0 16px 40px -14px rgba(74,56,38,.26); --radio:16px; } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--texto); background:#fff; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} button{font-family:inherit;} .contenedor{max-width:1140px;margin:0 auto;padding:0 20px;} /* ===== Cabecera ===== header es el único elemento con position (sticky): el desplegable móvil cuelga de él con position:absolute (no fixed), así que no hay ningún descendiente position:fixed anidado dentro de un ancestro posicionado — la causa real del solapamiento que hubo antes. */ header.cabecera{ position:sticky;top:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:14px 20px; /* Translucida de fabrica; el tema puede ponerla solida. El desenfoque va por variable con el mismo motivo: sin apagarlo, una barra blanca opaca sigue pagando el coste de pintar el blur en cada scroll. */ background:var(--cabecera-fondo,rgba(255,255,255,.92)); backdrop-filter:var(--cabecera-desenfoque,blur(10px)); -webkit-backdrop-filter:var(--cabecera-desenfoque,blur(10px)); border-bottom:1px solid var(--borde); transition:box-shadow .2s; } header.cabecera.con-sombra{box-shadow:0 4px 24px -8px rgba(69,59,50,.15);} .marca{display:flex;align-items:center;gap:10px;} .marca img{width:44px;height:44px;flex-shrink:0;border-radius:10px;} .marca .nombre{font-weight:700;font-size:.95rem;letter-spacing:.02em;color:var(--marron);line-height:1.2;} /* El renglon de debajo del nombre es la direccion de la asociacion, y la escribe ella: una direccion postal entera partia la cabecera en dos lineas y la hacia crecer. Se queda en una linea, con puntos suspensivos si no cabe — la direccion completa esta en Contacto y en el pie, que es donde se va a leer. */ .marca .nombre small{display:block;font-weight:500;font-size:.62rem;letter-spacing:.06em;color:var(--texto-suave);text-transform:uppercase; max-width:min(46vw,260px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} nav.principal{ display:flex;flex-direction:column;gap:0; position:absolute;top:100%;left:0;right:0;background:#fff; padding:8px 20px 12px;border-bottom:1px solid var(--borde); max-height:0;overflow:hidden;opacity:0; transition:max-height .25s ease, opacity .2s ease; } /* Alto del menú desplegado en móvil. NO un número fijo de píxeles: el que había (320px) se calculó cuando el menú tenía seis entradas, y al llegar a ocho recortaba a partir de "Hazte socio" — medido, el contenido ocupa 453px. Y ahora el número de entradas ni siquiera es fijo: la asociación las enciende y apaga desde su panel. Con 75vh cabe cualquier menú en un móvil normal, y en una pantalla pequeña el overflow-y deja llegar a las últimas en vez de esconderlas. */ nav.principal.abierto{ max-height:var(--alto-menu, min(75vh,560px));opacity:1;overflow-y:auto; box-shadow:0 16px 24px -12px rgba(69,59,50,.18); } nav.principal a{ width:100%;text-align:center;font-size:.95rem;font-weight:600;letter-spacing:.02em; color:var(--marron);padding:14px 4px;border-bottom:1px solid var(--borde); } nav.principal a.activo{color:var(--rosa-oscuro);} /* Pantallas bajas (un iPhone SE, o cualquier móvil con el teclado o el aviso de cookies comiéndose el hueco): las entradas se aprietan para que quepan las ocho sin scroll. Medido — a 54px por entrada no entraban en los 395px disponibles y la última quedaba bajo el pliegue; a 45px sí. */ @media(max-height:700px){ nav.principal a{padding:9px 4px;font-size:.9rem;} } /* Entradas que la asociación ha apagado desde su panel (js/lg-layout.js les pone [hidden]). Explícito y con !important porque estos enlaces son items de un flex: basta con que alguien les ponga un `display` aquí para que la regla de [hidden] del navegador deje de aplicarse y reaparezcan. */ nav.principal a[hidden], footer nav a[hidden]{display:none !important;} .cabecera-espaciador{display:none;} .boton-menu{ display:flex;flex-direction:column;justify-content:center;gap:5px; width:38px;height:38px;border:none;background:none;cursor:pointer; } .boton-menu span{display:block;height:2px;width:100%;background:var(--marron);border-radius:2px;transition:transform .2s, opacity .2s;} .boton-menu.abierto span:nth-child(1){transform:translateY(7px) rotate(45deg);} .boton-menu.abierto span:nth-child(2){opacity:0;} .boton-menu.abierto span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ===== Migas de pan ===== */ .migas{background:var(--gris-claro);padding:14px 0;} .migas .contenedor{font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-suave);} .migas span{color:var(--rosa-oscuro);} /* ===== Secciones ===== */ section{padding:56px 0;} section.franja-clara{background:var(--gris-claro);} section.franja-oscura{background:var(--gris-oscuro);color:#e9e8e5;} /* El grosor sale del tema de la asociacion (services/tema_asociacion.py). El respaldo del var() es el 700 de siempre, asi que quien no elige nada se queda exactamente igual. */ h1,h2,h3{color:var(--marron);font-weight:var(--peso-titulos,700);} h1{font-size:1.7rem;letter-spacing:.01em;text-align:center;margin-bottom:14px;line-height:1.25;} h2{font-size:1.45rem;letter-spacing:.01em;margin-bottom:14px;} /* El titular de una sección va centrado sea h1 o h2. Iba centrado por casualidad —todos eran h1, y h1 lo está— hasta que "una página, un h1" convirtió los de dentro en h2 y se fueron a la izquierda. El nivel del encabezado es estructura de la página; la alineación no puede colgar de él. Lo pone js/lg-paginas.js en los titulares de sección, nunca en los de un bloque de texto, que sí van a la izquierda dentro de su columna. */ .seccion-titulo{text-align:center;} /* Y al reves: dentro de un bloque de texto el titular va a la izquierda con su parrafo. El de la PRIMERA seccion de una pagina de contenido es su h1 —una pagina sin h1 no dice de que va— y hasta ahora eso lo centraba solo, dejandolo desalineado con el texto de debajo. */ .texto-cuerpo h1{text-align:left;} .subtitulo{text-align:center;color:var(--texto-suave);max-width:560px;margin:0 auto 8px;font-size:.98rem;} .etiqueta{ display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--rosa-oscuro);background:var(--mostaza-suave);padding:6px 14px;border-radius:999px;margin-bottom:14px; } /* ===== Botones ===== */ .boton{ display:inline-flex;align-items:center;gap:8px; background:var(--rosa);color:#fff;font-weight:600; font-size:.85rem;letter-spacing:.02em;font-family:inherit; padding:14px 28px;border-radius:999px;border:none;cursor:pointer; box-shadow:0 10px 22px -8px rgba(168,109,115,.5); transition:transform .15s, box-shadow .15s, background .15s; } .boton:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(168,109,115,.6);background:var(--rosa-oscuro);} .boton.secundario{background:#fff;color:var(--marron);border:1.5px solid var(--borde);box-shadow:none;} .boton.secundario:hover{border-color:var(--rosa);color:var(--rosa-oscuro);box-shadow:none;} /* ===== Marcador "sustituir" ===== Subrayado amarillo brillante para cualquier texto de ejemplo (citas, nombres, cifras) que haya que cambiar por contenido real antes de publicar — mismo color en toda la web para que sea reconocible de un vistazo, sin tocar el color del propio texto. */ .marcador-sustituir{ text-decoration:underline;text-decoration-color:#ffe600;text-decoration-thickness:3px; text-underline-offset:3px;text-decoration-skip-ink:none; } /* ===== Imagen por defecto (placeholder) ===== Caja con patrón de rayas + icono, allí donde falta una foto real. .img-placeholder-etiqueta es el texto "sustituir" dentro de la caja, con el mismo subrayado amarillo que .marcador-sustituir. */ .img-placeholder{ position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; background:repeating-linear-gradient(45deg, var(--gris-claro), var(--gris-claro) 12px, #fff 12px, #fff 24px); border:2px dashed var(--borde);color:var(--texto-suave);text-align:center;padding:14px; } .img-placeholder svg{width:26px;height:26px;opacity:.5;flex-shrink:0;} .img-placeholder-etiqueta{ font-size:.68rem;font-weight:700;line-height:1.4;max-width:220px; } /* ===== Hero ===== */ .hero{position:relative;padding:70px 0 40px;text-align:center;overflow:hidden;color:#fff;} .hero-foto{ position:absolute;inset:0;z-index:-2; background:#55483a center/cover no-repeat; } .hero-foto::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(51,42,32,.72), rgba(51,42,32,.88)); } .hero .logo-grande{width:96px;height:96px;margin:0 auto 20px;border-radius:50%;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);} .hero h1{font-size:1.9rem;color:#fff;} .hero p.intro{max-width:600px;margin:0 auto 26px;color:#e7e3db;font-size:1rem;} .hero .acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;} /* ===== Tarjetas ===== */ .rejilla{display:grid;grid-template-columns:1fr;gap:20px;margin-top:24px;} /* Contenedor del diagrama en canvas (js/lg-diagramas.js). El canvas se mide contra el ancho de ESTE div, así que no puede llevar padding lateral que el JS no vea; el aire va fuera, en el margin. */ .lg-diagrama{margin:30px 0 6px;width:100%;} .lg-diagrama canvas{display:block;margin:0 auto;} .tarjeta{ background:#fff;border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden; box-shadow:var(--sombra);transition:transform .2s, box-shadow .2s; } .tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-hover);} .tarjeta .cuerpo{padding:22px 20px;} .tarjeta .icono{ width:44px;height:44px;border-radius:12px;margin-bottom:14px; display:flex;align-items:center;justify-content:center; background:var(--azul-suave);color:var(--azul); } .tarjeta .icono svg{width:22px;height:22px;} .tarjeta:nth-child(even) .icono{background:var(--mostaza-suave);color:var(--rosa-oscuro);} .tarjeta h3{font-size:1.02rem;margin-bottom:8px;} .tarjeta p{color:var(--texto-suave);font-size:.9rem;} .tarjeta-foto{aspect-ratio:16/9;border:none;border-radius:0;} .tarjeta-foto svg{width:22px;height:22px;} .tarjeta-foto .img-placeholder-etiqueta{font-size:.62rem;max-width:190px;} .tarjeta-foto img{width:100%;height:100%;object-fit:cover;display:block;} /* ===== Opiniones ===== */ .rejilla-opiniones{display:grid;grid-template-columns:1fr;gap:20px;margin-top:24px;} .opinion{ background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:26px 22px; box-shadow:var(--sombra);display:flex;flex-direction:column;gap:14px; } .opinion-cita{color:var(--texto);font-size:.96rem;line-height:1.55;position:relative;padding-left:26px;} .opinion-cita::before{content:"“";position:absolute;left:-2px;top:-6px;font-size:2.2rem;color:var(--mostaza);font-weight:800;line-height:1;} .opinion-autor{display:flex;align-items:center;gap:12px;margin-top:auto;} .opinion-avatar{ width:42px;height:42px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:repeating-linear-gradient(45deg, var(--gris-claro), var(--gris-claro) 5px, #fff 5px, #fff 10px); border:2px dashed var(--borde);color:var(--texto-suave); } .opinion-avatar svg{width:18px;height:18px;} .opinion-nombre{font-weight:700;color:var(--marron);font-size:.86rem;line-height:1.3;} .opinion-comercio{font-size:.76rem;color:var(--texto-suave);} /* ===== Colaboran con nosotros ===== */ .franja-colaboradores{padding:44px 0;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);} .colaboradores-titulo{ text-align:center;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em; color:var(--texto-suave);margin-bottom:22px; } /* Flex y no grid a propósito: los colaboradores se van añadiendo de uno en uno, y con columnas fijas el tercero (o el quinto) se queda pegado a la izquierda en su fila en vez de centrado. Envolviendo y centrando, la tira queda bien con los que haya. */ .rejilla-colaboradores{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:18px 28px;max-width:720px;margin:0 auto; } .colaborador-logo{ /* Base pequeña y con permiso para crecer: con 190 fijos, en un móvil no entraban dos por fila (el envoltorio salta de línea antes de encoger nada) y los tres logos quedaban uno debajo de otro. Con 150 caben dos, y en escritorio se estiran hasta 210 para llenar la fila. */ flex:1 1 150px;max-width:210px;height:76px;border-radius:14px;padding:10px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; } .colaborador-logo svg{width:24px;height:24px;} .colaborador-logo img{max-width:100%;max-height:100%;object-fit:contain;} .colaborador-nombre{font-size:.72rem;font-weight:700;color:var(--texto-suave);} /* ===== Foto de personas (equipo/fundadoras) ===== */ .foto-equipo{ aspect-ratio:4/3;border-radius:var(--radio);margin-bottom:18px; } .foto-equipo svg{width:30px;height:30px;} /* ===== Comercios ===== Todas las tarjetas comparten el mismo tamaño y estructura (portada + avatar superpuesto + nombre + categoría). Las 34 asociadas llevan una portada de imagen por defecto (patrón + degradado propio, a la espera de fotos reales); "Farmacia Demo" es la única con foto real, para que se vea la diferencia entre "pendiente" y "ya lleno de datos". */ /* Filtro por categoría (comercios.html) — chips en vez de secciones separadas por categoría: con pocos socios por categoría, un titular por cada una dejaba la página en franjas de 1-2 tarjetas sueltas; con todos juntos y un filtro arriba, la rejilla se ve llena desde el principio y sigue funcionando igual cuando haya muchos más socios. */ /* En móvil, una sola fila que se arrastra — no una nube centrada. Con quince categorías y anchos muy distintos ("Farmacia" al lado de "Belleza y cuidado personal"), `flex-wrap` + `justify-content:center` deja una o dos por renglón y cada renglón centrado por su cuenta: sale un zigzag de diez líneas que empuja los comercios —que son a lo que se viene— fuera de la pantalla. Es el mismo patrón que .sf-cats y .sf-actions del escaparate (frontend/css/tienda.css): fila única, se desliza con el dedo y sin barra a la vista. Desde 860px vuelve la nube centrada, que en ancho sobrado se ve bien y era lo que ya había. */ .chips-categoria{ display:flex;gap:8px;margin:22px 0 4px; flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; padding-bottom:2px; /* Los 20px son el padding de .contenedor, que es de quien cuelga esto: se le restan y se devuelven como padding propio para que la fila llegue al borde de la pantalla. Sin eso, el último chip se corta contra el margen y parece que ahí se acaba la lista. */ margin-left:-20px;margin-right:-20px; padding-left:20px;padding-right:20px; } .chips-categoria::-webkit-scrollbar{display:none;} .chip-categoria{flex-shrink:0;} .chip-categoria{ display:inline-flex;align-items:center;gap:6px; padding:9px 16px;border-radius:999px;border:1.5px solid var(--borde); background:#fff;color:var(--texto-suave);font-family:inherit; font-size:.8rem;font-weight:600;cursor:pointer;transition:border-color .15s, color .15s, background .15s; } .chip-categoria:hover{border-color:var(--rosa);color:var(--rosa-oscuro);} .chip-categoria.activo{background:var(--rosa);border-color:var(--rosa);color:#fff;} .chip-categoria-num{ font-size:.68rem;font-weight:700;border-radius:999px;padding:1px 7px; background:var(--gris-claro);color:var(--texto-suave); } .chip-categoria.activo .chip-categoria-num{background:rgba(255,255,255,.3);color:#fff;} .rejilla-comercios{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px;} .comercio{ display:block;background:#fff;border:1px solid var(--borde);border-radius:16px; overflow:hidden;text-decoration:none;color:inherit; transition:transform .2s, box-shadow .2s; } .comercio:hover{transform:translateY(-3px);box-shadow:var(--sombra);} .com-cover{ height:60px; background: radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.6px) 0 0/14px 14px, linear-gradient(135deg,var(--azul-suave),var(--mostaza-suave)); } .comercio-demo .com-cover{ background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.4) 100%), url('https://lixai.es/uploads/covers/f6aab822-cda6-4cfc-afad-4dd91674077c.webp') center 82% / cover no-repeat; } .com-cuerpo{padding:0 12px 14px;margin-top:-20px;} .com-avatar{ width:38px;height:38px;border-radius:10px; display:flex;align-items:center;justify-content:center; background:#fff;border:2.5px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.14); color:var(--azul);font-weight:700;font-size:.92rem;margin-bottom:8px; } .com-avatar-img{ width:38px;height:38px;border-radius:10px;object-fit:cover;display:block; border:2.5px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.14);background:#fff;margin-bottom:8px; } .comercio h4{font-size:.86rem;color:var(--marron);margin-bottom:3px;line-height:1.3;} .comercio .categoria{font-size:.66rem;color:var(--texto-suave);text-transform:uppercase;letter-spacing:.04em;} .comercio-demo .categoria{color:var(--rosa-oscuro);font-weight:700;} .aviso-proximamente{ margin-top:40px;padding:24px 20px;background:linear-gradient(135deg,var(--azul-suave),var(--mostaza-suave)); border-radius:var(--radio);text-align:center;color:var(--marron);font-size:.92rem; } .aviso-proximamente strong{display:block;font-size:1rem;margin-bottom:6px;} /* ===== Mapa de negocios (index) ===== */ /* position+z-index (no solo position) para que esta caja abra SU PROPIO contexto de apilamiento: los controles y paneles de Leaflet llevan z-index hasta 1000 (leaflet.css), y sin esto compiten directamente con la cabecera (z-index:50) y ganan — el mapa se pinta encima al hacer scroll. Con esto se quedan contenidos dentro de la caja. */ .mapa-negocios-caja{ position:relative;z-index:0; margin-top:20px;border-radius:var(--radio);overflow:hidden;border:1px solid var(--borde); box-shadow:var(--sombra); } #mapa-inicio{height:340px;width:100%;background:var(--gris-claro);} .mapa-negocios-leyenda{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:.78rem;color:var(--texto-suave);} .mapa-negocios-leyenda span{display:inline-flex;align-items:center;gap:6px;} .mn-punto{width:10px;height:10px;border-radius:50%;display:inline-block;} .mn-punto-azul{background:#2563eb;} .mn-punto-rojo{background:#e0212e;} .mn-pin svg{filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));} .mn-popup{font-size:.85rem;min-width:180px;} .mn-popup .mn-nombre{font-weight:700;color:var(--marron);margin-bottom:2px;} .mn-popup .mn-badge{display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#fff;background:#2563eb;padding:2px 8px;border-radius:999px;margin-bottom:4px;} .mn-popup .mn-cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--rosa-oscuro);margin-bottom:4px;} .mn-popup .mn-dir{color:var(--texto-suave);font-size:.8rem;} .mn-popup .mn-tel a{color:#2563eb;font-weight:600;} .mn-popup .mn-ver{display:inline-block;margin-top:6px;color:#2563eb;font-weight:700;font-size:.82rem;} .mn-popup .mn-aprox{font-size:.68rem;font-style:italic;color:var(--texto-suave);margin-top:2px;} /* ===== Listas ===== */ ul.lista-objetivos{list-style:none;margin-top:10px;} ul.lista-objetivos li{padding:12px 0 12px 26px;position:relative;border-bottom:1px solid var(--borde);font-size:.94rem;} ul.lista-objetivos li::before{ content:"";position:absolute;left:0;top:20px;width:8px;height:8px;border-radius:50%;background:var(--mostaza); } .texto-cuerpo p{margin-bottom:14px;color:var(--texto);font-size:.96rem;} .texto-cuerpo p:last-child{margin-bottom:0;} /* ===== Contacto ===== */ .datos-contacto{display:flex;flex-direction:column;gap:22px;margin-top:26px;} .dato{display:flex;gap:14px;align-items:flex-start;} .dato .marcador{ width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--borde); display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--rosa-oscuro); font-size:1.05rem;box-shadow:var(--sombra); } .dato h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-suave);margin-bottom:3px;} .dato p, .dato a{font-size:.95rem;color:var(--marron);font-weight:500;} .tarjeta-mapa{ margin-top:32px;border-radius:var(--radio);overflow:hidden;border:1px solid var(--borde); height:220px;background:linear-gradient(135deg,var(--azul-suave),var(--mostaza-suave)); display:flex;align-items:center;justify-content:center;color:var(--texto-suave);font-size:.85rem;text-align:center;padding:20px; ;white-space:pre-line;} /* ===== Pie ===== */ footer{background:var(--gris-oscuro);color:#c9c8c4;padding:40px 0 20px;font-size:.86rem;} footer .contenedor{display:flex;flex-direction:column;gap:26px;align-items:center;text-align:center;} footer .marca-pie{display:flex;flex-direction:column;align-items:center;gap:10px;} footer .marca-pie img{width:52px;height:52px;} footer .redes{display:flex;gap:10px;margin-top:2px;} footer .redes a{ width:34px;height:34px;border-radius:50%;border:1px solid #4d4536; display:flex;align-items:center;justify-content:center;transition:border-color .15s, color .15s; } footer .redes a:hover{border-color:#fff;} footer .redes svg{width:16px;height:16px;} footer h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;} footer nav{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;} footer a:hover{color:#fff;} .pie-nota{text-align:center;margin-top:10px;font-size:.72rem;color:#8f8e8a;} .pie-nota a{text-decoration:underline;} /* ===== Aviso de cookies ===== Fijo abajo (no un modal a pantalla completa): el visitante puede seguir leyendo la web mientras decide, que es lo que pide el RGPD — rechazar tiene que costar lo mismo que aceptar, y los dos botones tienen el mismo peso visual salvo el color de marca. Ver js/lg-layout.js::renderAvisoCookies. */ #aviso-cookies{ position:fixed;left:0;right:0;bottom:0;z-index:80; background:var(--gris-oscuro);color:#dedcd7; padding:16px 0;box-shadow:0 -10px 30px -12px rgba(0,0,0,.4); } .aviso-cookies-caja{display:flex;flex-direction:column;gap:14px;} #aviso-cookies p{font-size:.84rem;line-height:1.55;margin:0;} #aviso-cookies a{text-decoration:underline;color:#fff;} .aviso-cookies-botones{display:flex;gap:10px;flex-wrap:wrap;} .aviso-cookies-botones .boton{padding:11px 22px;font-size:.8rem;flex:1;justify-content:center;} /* ===== Aparición al cargar ===== A propósito NO depende del scroll ni de JS: un IntersectionObserver deja invisible para siempre cualquier tarjeta que el usuario se salte (tecla Fin, clic en la barra de scroll, un enlace ancla) sin pasar por el viewport. La animación CSS es por tiempo, no por posición: termina sola y con `both` se queda en el estado final aunque el navegador no soporte @keyframes (entonces simplemente no anima, pero nunca oculta nada). */ @keyframes aparecer{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} .revelar{animation:aparecer .5s ease both;} .rejilla .revelar:nth-child(2){animation-delay:.06s;} .rejilla .revelar:nth-child(3){animation-delay:.12s;} .rejilla .revelar:nth-child(4){animation-delay:.18s;} .rejilla .revelar:nth-child(5){animation-delay:.24s;} .rejilla .revelar:nth-child(6){animation-delay:.3s;} .rejilla .revelar:nth-child(7){animation-delay:.36s;} @media(prefers-reduced-motion: reduce){ .revelar{animation:none;} } /* ===== Alta de socios (alta-socio.html) ===== Formulario público, sin Bootstrap ni panel.css a propósito (este micrositio es independiente del panel de lixai) — pero calcado en su estructura visual: portada + logo circular superpuesto, igual que la ficha de tienda del panel. Pensado para gente poco puesta en tecnología: inputs grandes, poco texto, horario de dos toques por día en vez de escribir nada. */ .alta-aviso{ padding:14px 16px;border-radius:12px;margin-bottom:20px;font-size:.9rem; } .alta-aviso-error{background:#fbeaea;color:#8a2b2b;border:1px solid #f0c6c6;} /* El acuse de "recibido" al enviar un formulario. Existe desde el formulario de socio-persona: hasta ahora el unico aviso del micrositio era el rojo, y dar el "gracias" en rojo es decirle a alguien que algo ha ido mal. */ .alta-aviso-ok{background:#e8f6ec;color:#1e6b39;border:1px solid #bfe3cc;} .alta-aviso ul{margin:8px 0 0;padding-left:20px;} .alta-aviso li{margin-top:4px;} /* Cuando el servidor rechaza un campo, el aviso de arriba no basta: en un formulario largo el negocio no sabe a cuál se refiere. Se marca el campo en rojo y se le lleva hasta él. */ .alta-campo.tiene-error input, .alta-campo.tiene-error select, .alta-campo.tiene-error textarea{border-color:#d05252;background:#fffafa;} .alta-campo-error{ display:flex;gap:6px;align-items:flex-start; font-size:.78rem;font-weight:600;color:#a33a3a;margin-top:5px; } .alta-campo-error::before{content:"⚠";flex:none;} .alta-imagenes{margin-bottom:30px;} .alta-cover{ position:relative;height:140px;border-radius:var(--radio); background:linear-gradient(135deg,var(--azul-suave),var(--mostaza-suave)) center/cover no-repeat; border:1px solid var(--borde);display:flex;align-items:flex-end;justify-content:flex-end;padding:10px; } .alta-cover.tiene-imagen{background-color:#000;} .alta-cover-boton{ background:#fff;border:1px solid var(--borde);border-radius:999px;padding:8px 14px; font-size:.78rem;font-weight:600;color:var(--marron);cursor:pointer;box-shadow:var(--sombra); } .alta-cover-position-row{padding:10px 4px 0;} .alta-cover-position-row label{display:block;font-size:.76rem;font-weight:600;color:var(--texto-suave);margin-bottom:4px;} .alta-cover-position-row input[type=range]{width:100%;accent-color:var(--rosa);} .alta-logo-wrap{margin-top:-32px;padding-left:16px;} /* ...pero no cuando encima hay deslizador de portada. Con el margen negativo el cuadro del logo caía justo sobre la barra y la partía por la mitad, tapando medio control en la única pantalla desde la que se usa. Con portada puesta (fila visible) el logo va DEBAJO de la barra; sin portada, la fila está oculta y el logo sigue montado sobre la foto, que es el remate de siempre. */ .alta-cover-position-row:not([hidden]) + .alta-logo-wrap{margin-top:12px;} /* Cuadrado redondeado y NO un círculo, y con el mismo fondo crema: es exactamente la caja en la que se va a ver este logo en el escaparate público (.sf-avatar en frontend/css/tienda.css — 14px de radio, borde blanco de 3, fondo #f5efe3 para los PNG transparentes). Mientras aquí era un círculo, el negocio elegía su logo mirando una vista previa que le comía las esquinas y luego lo veía publicado de otra forma. El tamaño sí difiere (72 aquí, 78 allí) y da igual: lo que tiene que coincidir es el RECORTE, no los píxeles. */ .alta-logo{ position:relative;width:72px;height:72px;border-radius:14px; background:#f5efe3 center/cover no-repeat; border:3px solid #fff;box-shadow:var(--sombra); } /* Los botones del logo van FUERA del cuadro, en su propia barra debajo — el gemelo de .alta-cover-position-row, que es la barra de la portada. El "+" vivía pegado a la esquina de la vista previa y tapaba parte del logo justo en la pantalla en la que el negocio está mirando si su logo se ve bien; en un cuadrado de 72 px esa esquina es contenido, no adorno. */ .alta-logo-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;} .alta-logo-boton{ background:#fff;border:1px solid var(--borde);border-radius:999px;padding:7px 13px; font-size:.78rem;font-weight:600;color:var(--marron);cursor:pointer;box-shadow:var(--sombra); display:inline-flex;align-items:center;gap:6px; } .alta-logo-boton:hover{border-color:var(--rosa);color:var(--rosa);} .alta-imagenes-nota{font-size:.76rem;color:var(--texto-suave);margin-top:10px;padding-left:16px;} /* — Recortar el logo antes de subirlo (js/recorte-logo.js) — El cuadro del lienzo repite a propósito el radio, el borde y el fondo de .alta-logo / .sf-avatar: la gracia de este modal es que lo que se ve aquí dentro sea lo que se va a publicar, no un parecido. */ .recorte-fondo{ position:fixed;inset:0;z-index:1200;background:rgba(20,18,16,.55); display:flex;align-items:center;justify-content:center;padding:18px; } body.recorte-abierto{overflow:hidden;} .recorte-caja{ background:#fff;border-radius:var(--radio);padding:22px 20px;max-width:340px;width:100%; box-shadow:0 18px 50px rgba(0,0,0,.28);text-align:center; } .recorte-titulo{margin:0 0 6px;font-size:1.05rem;color:var(--marron);} .recorte-ayuda{margin:0 0 16px;font-size:.8rem;color:var(--texto-suave);line-height:1.4;} .recorte-lienzo-wrap{display:flex;justify-content:center;} .recorte-lienzo{ width:260px;height:260px;max-width:100%;border-radius:14px; border:3px solid #fff;box-shadow:var(--sombra);background:#f5efe3; cursor:grab;touch-action:none; } .recorte-lienzo:active{cursor:grabbing;} .recorte-zoom-row{display:flex;align-items:center;gap:10px;margin:16px 0 18px;color:var(--texto-suave);} .recorte-zoom-row input[type=range]{flex:1;accent-color:var(--rosa);} .recorte-botones{display:flex;gap:10px;} .recorte-botones button{flex:1;border-radius:999px;padding:11px 14px;font-weight:700;font-size:.86rem;cursor:pointer;} .recorte-btn-secundario{background:#fff;border:1px solid var(--borde);color:var(--marron);} .recorte-btn-principal{background:var(--rosa);border:1px solid var(--rosa);color:#fff;} .alta-campo{margin-bottom:20px;} .alta-campo label{display:block;font-weight:700;font-size:.86rem;color:var(--marron);margin-bottom:6px;} .alta-campo .req{color:var(--rosa-oscuro);} .alta-ayuda{font-size:.78rem;color:var(--texto-suave);margin-top:5px;} .alta-fila{display:grid;grid-template-columns:1fr;gap:16px;} .alta-campo input[type=text], .alta-campo input[type=email], .alta-campo input[type=tel], .alta-campo input[type=url], .alta-campo input[type=password], .alta-campo input[type=number], .alta-campo input[type=date], .alta-campo input[type=search], .alta-campo select, .alta-campo textarea{ width:100%;padding:13px 14px;border:1.5px solid var(--borde);border-radius:12px; font-family:inherit;font-size:.95rem;color:var(--texto);background:#fff; } .alta-campo input:focus, .alta-campo select:focus, .alta-campo textarea:focus{outline:none;border-color:var(--azul);} .alta-campo textarea{resize:vertical;} .alta-consentimiento label{display:flex;align-items:flex-start;gap:10px;font-weight:400;font-size:.82rem;color:var(--texto-suave);line-height:1.5;} .alta-consentimiento input[type=checkbox]{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--azul);} .alta-consentimiento a{color:var(--azul);text-decoration:underline;} .alta-enviar{width:100%;justify-content:center;border:none;font-size:.95rem;padding:16px 28px;margin-top:10px;} /* Subtítulo de bloque dentro de un formulario largo (p.ej. "Datos bancarios" en alta-nuevo-socio.html) — separa secciones sin necesitar una tarjeta ni un fondo aparte. */ .alta-seccion-titulo{font-size:1.05rem;color:var(--marron);margin:8px 0 16px;padding-top:18px;border-top:1px solid var(--borde);} .alta-seccion-titulo:first-of-type{border-top:none;padding-top:0;} /* Recuadro de firma dibujada a mano (ver js/firma-pad.js) — borde a rayas mientras está vacío, para que quede claro que hay que firmar ahí y no es solo una caja decorativa. */ .firma-pad-wrap{border:1.5px dashed var(--borde);border-radius:var(--radio);padding:6px;background:var(--crema);} .firma-pad-canvas{width:100%;height:160px;display:block;touch-action:none;background:#fff;border-radius:calc(var(--radio) - 4px);cursor:crosshair;} .firma-pad-acciones{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:10px;flex-wrap:wrap;} .firma-pad-ayuda{font-size:.76rem;color:var(--texto-suave);} .firma-pad-borrar{background:none;border:none;color:var(--rosa-oscuro);font-weight:700;font-size:.8rem;cursor:pointer;padding:4px 8px;} .firma-pad-borrar:hover{text-decoration:underline;} /* Horario: cada día es un bloque grande y separado (para que un dedo poco preciso no toque el de al lado), con tres estados elegidos por radio en vez de casillas + botones — corrido, partido o cerrado, nada más. */ .horario-dia{border:1px solid var(--borde);border-radius:14px;padding:14px 16px;margin-bottom:10px;background:#fff;} .horario-dia-nombre{font-weight:700;color:var(--marron);margin-bottom:10px;} .horario-tipo{display:flex;flex-direction:column;gap:8px;} .horario-tipo label{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--texto);cursor:pointer;} .horario-tipo input[type=radio]{width:19px;height:19px;accent-color:var(--rosa);flex-shrink:0;} .horario-tramos-corrido,.horario-tramos-partido{margin-top:12px;padding-left:29px;} .horario-tramo{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:.85rem;color:var(--texto-suave);} .horario-tramo input[type=time]{ padding:8px 10px;border:1.5px solid var(--borde);border-radius:10px;font-family:inherit;font-size:.9rem; } @media(min-width:600px){ .horario-tipo{flex-direction:row;gap:20px;flex-wrap:wrap;} } /* Horario especial (vacaciones, festivos, rangos de fechas con horario reducido) — misma tarjeta que .horario-dia, con un rango de fechas en vez de un nombre de día. */ .horario-especial-fila{border:1px solid var(--borde);border-radius:14px;padding:14px 16px;margin-bottom:10px;background:#fff;} .horario-especial-fila .alta-fila{margin-bottom:6px;} .horario-especial-cerrado{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--texto);cursor:pointer;margin:6px 0 0;} .horario-especial-cerrado input[type=checkbox]{width:19px;height:19px;accent-color:var(--rosa);flex-shrink:0;} .horario-especial-horas{margin-top:12px;} .horario-especial-quitar{margin-top:14px;} /* Subtítulos de grupo dentro del formulario de ficha (Identidad/Contacto/ Redes y web/Descripción/Horario...) — mayúsculas espaciadas en rosa oscuro, con una línea encima para separar del grupo anterior. */ .ficha-grupo-titulo{ font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--rosa-oscuro);margin:30px 0 16px;padding-top:22px;border-top:1px solid var(--borde); } .ficha-grupo-titulo:first-child{margin-top:0;padding-top:0;border-top:none;} .alta-gracias{text-align:center;padding:50px 20px;} .alta-gracias-icono{ width:64px;height:64px;border-radius:50%;background:var(--azul-suave);color:var(--azul); display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800;margin:0 auto 20px; } .alta-gracias p{color:var(--texto-suave);max-width:420px;margin:0 auto;} @media(min-width:600px){ .alta-fila{grid-template-columns:1fr 1fr;} } /* ===== Escritorio ===== */ @media(min-width:860px){ /* Barra en tres columnas (logo · menú · hueco) para que el menú quede centrado de verdad, sin importar el ancho del logo. */ header.cabecera{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center; padding:16px 32px; } .marca img{width:50px;height:50px;} .marca{justify-self:start;} .boton-menu{display:none;} .cabecera-espaciador{display:block;} nav.principal{ position:static;max-height:none;overflow:visible;opacity:1; background:none;border:none;padding:0; flex-direction:row;gap:30px;justify-self:center; } nav.principal a{ width:auto;padding:6px 2px;border-bottom:2px solid transparent;font-size:.82rem; text-transform:uppercase;letter-spacing:.06em; } nav.principal a:hover, nav.principal a.activo{border-color:var(--rosa);color:var(--rosa-oscuro);} /* «Hazte socio» como boton, si el tema de esta asociacion lo pide. Todo por variables con respaldo: sin tema, estas cuatro no existen y el enlace se ve como los demas -- que es como se ve hoy en todas. Se reutiliza la entrada del menu que ya hay en vez de anadir un elemento: asi no hay que tocar lg-layout.js, y si la asociacion apaga «Hazte socio» desde su panel, el boton desaparece con ella en vez de quedarse apuntando a una pagina que ya no ensena. */ nav.principal a[data-nav-key="asociarse"]{ background:var(--nav-cta-fondo,transparent); color:var(--nav-cta-texto,inherit); border-radius:var(--nav-cta-radio,0); padding:var(--nav-cta-relleno,6px 2px); } nav.principal a[data-nav-key="asociarse"]:hover, nav.principal a[data-nav-key="asociarse"].activo{ color:var(--nav-cta-texto,var(--rosa-oscuro)); border-color:var(--nav-cta-activo-borde,var(--rosa)); } nav.principal a[data-nav-key="asociarse"]:hover{filter:var(--nav-cta-hover,none);} section{padding:80px 0;} h1{font-size:2.5rem;} h2{font-size:1.9rem;} .hero h1{font-size:2.9rem;} .hero p.intro{font-size:1.08rem;} .hero .logo-grande{width:120px;height:120px;} .rejilla{grid-template-columns:repeat(3,1fr);gap:26px;} .rejilla-comercios{grid-template-columns:repeat(4,1fr);gap:18px;} /* Vuelve la nube centrada: en escritorio caben de sobra y verlas todas de un vistazo es mejor que esconder la mitad detrás de un arrastre. */ .chips-categoria{ flex-wrap:wrap;justify-content:center;overflow-x:visible; margin-left:0;margin-right:0;padding-left:0;padding-right:0; } .rejilla-opiniones{grid-template-columns:repeat(3,1fr);gap:26px;} .dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;} #mapa-inicio{height:460px;} .aviso-cookies-caja{flex-direction:row;align-items:center;justify-content:space-between;gap:28px;} .aviso-cookies-botones{flex-shrink:0;} .aviso-cookies-botones .boton{flex:none;} footer .contenedor{flex-direction:row;justify-content:space-between;text-align:left;} footer .marca-pie{align-items:flex-start;} footer nav{justify-content:flex-start;} } /* ===== Agenda de eventos y bolsa de empleo ===== */ /* Mobile-first, como todo el sitio: una columna, y en pantalla ancha el cartel del evento se pone al lado en vez de debajo. */ .lg-vacio{ text-align:center;color:var(--texto-suave);font-size:.95rem;line-height:1.6; max-width:520px;margin:36px auto; } .lg-vacio a{color:var(--rosa-oscuro);font-weight:700;text-decoration:underline;} /* --- Eventos --- */ .eventos-lista{display:flex;flex-direction:column;gap:20px;margin-top:30px;} .evento{ background:#fff;border:1px solid var(--borde);border-radius:var(--radio); box-shadow:var(--sombra);overflow:hidden;padding:24px 22px; display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start; transition:transform .2s, box-shadow .2s; } .evento:hover{transform:translateY(-3px);box-shadow:var(--sombra-hover);} /* El taco de calendario: día grande, mes debajo. Es lo que deja recorrer la lista con la vista sin leer ninguna frase entera. */ .evento-taco{ display:flex;flex-direction:column;align-items:center;justify-content:center; width:64px;padding:11px 6px;border-radius:14px; background:var(--azul-suave);color:var(--marron);flex-shrink:0; border:1px solid rgba(127,180,217,.35); } .evento-taco-dia{font-size:1.7rem;font-weight:800;line-height:1;} .evento-taco-mes{font-size:.66rem;font-weight:800;letter-spacing:.1em;color:var(--rosa-oscuro);margin-top:4px;} .evento-cuerpo{min-width:0;} .evento-cuerpo h3{font-size:1.14rem;margin-bottom:12px;color:var(--marron);line-height:1.3;} .evento-datos{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;} .evento-dato{font-size:.85rem;color:var(--texto-suave);} .evento-enlace{display:inline-block;margin-top:16px;padding:10px 18px;font-size:.82rem;} /* Descripción recortable. La altura sale de line-clamp, así que el recorte cae siempre en una línea entera y no a media letra; el JS solo decide si hace falta el botón (ver montarVerMas en js/lg-eventos.js). */ .evento-desc{ color:var(--texto-suave);font-size:.93rem;line-height:1.6;white-space:pre-line; } .evento-desc.recortado{ display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; } /* `block` y no `inline-block`: el enlace "Más información" que va justo después también es inline-block, y los dos caían en la misma línea pisándose. Cada uno en la suya. */ .evento-vermas{ display:block;margin-top:10px;padding:0;border:none;background:none; text-align:left; color:var(--rosa-oscuro);font-family:inherit;font-size:.85rem;font-weight:700; cursor:pointer;text-decoration:underline; } .evento-vermas:hover{color:var(--marron);} /* Las fotos ocupan la fila entera debajo en móvil: a ese ancho, una imagen en una tercera columna no se vería. Un evento puede llevar varias: la primera se ve grande y el resto en una tira de miniaturas debajo. */ .evento-cartel{grid-column:1 / -1;display:flex;flex-direction:column;gap:8px;min-width:0;} .evento-cartel-principal{ border-radius:12px;overflow:hidden;border:1px solid var(--borde);background:var(--gris-claro); } .evento-cartel-principal img{width:100%;height:auto;display:block;} .evento-miniaturas{display:flex;gap:8px;flex-wrap:wrap;} /* 56px: entran cuatro sin envolver en el móvil más estrecho y siguen siendo suficientes para reconocer la foto. Es un botón de verdad, no un div con onclick: se llega con el tabulador y se dispara con Enter. */ .evento-miniatura{ width:56px;height:56px;padding:0;flex-shrink:0;cursor:pointer; border:2px solid var(--borde);border-radius:9px;overflow:hidden;background:none; transition:border-color .15s; } .evento-miniatura img{width:100%;height:100%;object-fit:cover;display:block;} .evento-miniatura:hover{border-color:var(--rosa);} .evento-miniatura.activa{border-color:var(--rosa-oscuro);} .evento-pasado-fecha{ font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase; color:var(--rosa-oscuro);margin-bottom:10px; } .tarjeta .evento-desc{font-size:.9rem;} /* --- Ofertas de empleo --- */ /* La tarjeta es un resumen: puesto, negocio y jornada. El texto entero va en el modal (js/lg-empleo.js) — una lista se recorre comparando, y con la descripción desplegada en cada una caben dos por pantalla. */ .empleo-lista{display:flex;flex-direction:column;gap:14px;margin-top:30px;} .empleo{ background:#fff;border:1px solid var(--borde);border-radius:var(--radio); box-shadow:var(--sombra);padding:20px 22px;cursor:pointer; display:flex;flex-direction:column;gap:16px; transition:transform .2s, box-shadow .2s, border-color .2s; } .empleo:hover{transform:translateY(-3px);box-shadow:var(--sombra-hover);border-color:var(--rosa);} .empleo-principal{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;} .empleo-texto{min-width:0;} .empleo-titulo{font-size:1.1rem;color:var(--marron);line-height:1.3;margin-bottom:7px;} .empleo-meta{display:flex;flex-direction:column;gap:3px;} .empleo-negocio{font-size:.88rem;color:var(--texto-suave);} .empleo-negocio-enlace{color:var(--rosa-oscuro);font-weight:700;text-decoration:underline;} .empleo-pista{font-size:.78rem;color:var(--texto-suave);opacity:.8;} .empleo-jornada{ flex-shrink:0;padding:6px 13px;border-radius:999px;background:var(--mostaza-suave); color:var(--marron);font-size:.73rem;font-weight:800;letter-spacing:.02em;white-space:nowrap; } .empleo-ver{align-self:flex-start;padding:10px 20px;font-size:.82rem;} .empleo-contactos{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;} .empleo-contacto{padding:11px 18px;font-size:.82rem;} .empleo-caduca{margin-top:16px;font-size:.8rem;color:var(--texto-suave);} /* Detalle dentro del modal */ .empleo-jornada-modal{display:inline-block;margin-bottom:12px;} .empleo-modal-titulo{font-size:1.3rem;color:var(--marron);line-height:1.25;margin-bottom:6px;} .empleo-modal-negocio{margin-bottom:18px;} .empleo-modal-desc{ color:var(--texto);font-size:.95rem;line-height:1.65;white-space:pre-line; } /* --- Modal público (js/lg-modal.js) --- */ .lg-modal-fondo{ position:fixed;inset:0;z-index:1200;background:rgba(51,42,32,.55); display:flex;align-items:flex-end;justify-content:center;padding:0; opacity:0;pointer-events:none;transition:opacity .18s ease; } .lg-modal-fondo.abierto{opacity:1;pointer-events:auto;} /* En móvil sube desde abajo y ocupa el ancho entero — es lo que espera el pulgar; en escritorio se centra como una caja normal (más abajo). */ .lg-modal-caja{ background:#fff;width:100%;max-height:88vh;overflow-y:auto; border-radius:var(--radio) var(--radio) 0 0;padding:30px 22px 26px; position:relative;box-shadow:0 -10px 40px -12px rgba(74,56,38,.4); transform:translateY(16px);transition:transform .18s ease; } .lg-modal-fondo.abierto .lg-modal-caja{transform:none;} .lg-modal-cerrar{ position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:50%; border:1px solid var(--borde);background:#fff;color:var(--texto-suave); font-size:1.5rem;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center; } .lg-modal-cerrar:hover{border-color:var(--rosa);color:var(--rosa-oscuro);} @media(min-width:768px){ /* El cartel pasa a una tercera columna a la derecha, con ancho fijo para que todas las tarjetas de la lista queden alineadas entre sí. Las que no tienen cartel se quedan a dos columnas (.evento-sin-cartel) en vez de dejar el hueco vacío. */ .evento{grid-template-columns:auto 1fr 240px;gap:24px;padding:28px 26px;} .evento.evento-sin-cartel{grid-template-columns:auto 1fr;} .evento-cartel{grid-column:auto;align-self:stretch;} /* La foto grande se come el alto que dejen las miniaturas, para que la columna quede llena igual que antes de que hubiera varias. */ .evento-cartel-principal{flex:1;min-height:150px;} .evento-cartel-principal img{height:100%;object-fit:cover;} .evento-datos{flex-direction:row;flex-wrap:wrap;gap:16px;} .empleo{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:22px 26px;} .empleo-principal{flex:1;min-width:0;align-items:center;} .empleo-ver{align-self:center;flex-shrink:0;} .lg-modal-fondo{align-items:center;padding:24px;} .lg-modal-caja{max-width:600px;border-radius:var(--radio);padding:34px 34px 30px;max-height:82vh;} } /* --- Descuentos y convenios --- Mobile-first: una columna y, en cuanto cabe, tantas como quepan de 300 px. `auto-fit` y no `auto-fill` a proposito: casi ninguna categoria tiene tres acuerdos, y con auto-fill las dos tarjetas de "Seguros" se quedaban encogidas a la izquierda con un hueco al lado. Con auto-fit se estiran y la fila queda completa. */ .descuentos-resumen{ text-align:center;color:var(--texto-suave);font-size:.9rem;margin-top:6px; } /* --- Centro de beneficios (asociarse.html) --- Hueco fijo entre el contenido escrito por la asociación y el formulario de alta: primero las ventajas a mano, luego los datos reales, luego el formulario. Mismos tokens que el resto de la web para heredar el color de cada asociación sin nada especial aquí. */ .beneficios-centro{ max-width:640px;margin:0 auto 28px;padding:20px 24px; background:#fff;border:1px solid var(--borde);border-radius:var(--radio); text-align:center; } .beneficios-centro p{margin:6px 0;color:var(--texto-suave);font-size:.92rem;} .beneficios-apps{color:var(--texto)!important;font-weight:600;} .beneficios-convenios a{color:var(--rosa-texto);font-weight:700;text-decoration:underline;} /* Indice de categorias. Con ocho bloques, bajar a rueda hasta encontrar el que te interesa es lo que hace que una pagina asi no se lea. */ .descuento-indice{ display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:22px auto 4px; max-width:760px; } .descuento-indice a{ display:inline-flex;align-items:center;gap:6px; font-size:.82rem;font-weight:700;color:var(--rosa-texto);text-decoration:none; background:#fff;border:1px solid var(--borde);border-radius:999px;padding:7px 14px; transition:border-color .2s, transform .2s; } .descuento-indice a:hover{border-color:var(--rosa);transform:translateY(-2px);} .descuento-indice span{ color:var(--texto-suave);font-weight:600;font-size:.76rem; } /* padding:0 porque esto es un
dentro de otro, y el global `section{padding:56px 0}` le metia 56 px arriba y abajo: entre el indice y la primera categoria quedaban 96 px de nada, y entre dos categorias 152. Medido en el navegador, que a ojo parecia el margen. */ .descuento-grupo{padding:0;margin-top:40px;scroll-margin-top:90px;} /* Cabecera de categoria: se lee como separador, no como titulo de pagina. El nombre va en marron y no en rosa porque el rosa de la marca sobre blanco se queda en 4,12 y esto es texto normal; el rosa se queda de filete, que es donde no hay que leerlo. */ .descuento-cabecera{ display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding-bottom:10px;border-bottom:1px solid var(--borde);margin-bottom:18px; } .descuento-cabecera h2{ font-size:1.05rem;color:var(--marron);text-transform:uppercase; letter-spacing:.07em;font-weight:800;margin:0; border-left:4px solid var(--rosa-oscuro);padding-left:11px; } .descuento-cuenta{color:var(--texto-suave);font-size:.8rem;white-space:nowrap;} .descuentos-rejilla{display:grid;grid-template-columns:1fr;gap:16px;} .convenio{ background:#fff;border:1px solid var(--borde);border-radius:var(--radio); box-shadow:var(--sombra);padding:20px 18px; display:flex;flex-direction:column; transition:transform .2s, box-shadow .2s, border-color .2s; } .convenio:hover{ transform:translateY(-4px);box-shadow:var(--sombra-hover);border-color:var(--rosa); } /* La inicial de quien lo ofrece. No es decoracion: da un ancla visual a cada tarjeta y evita que ocho bloques de texto parezcan el mismo. Mostaza con letra marron (10:1) en vez de rosa con letra blanca, que a este tamano no llegaba a AA. */ .convenio-cab{display:flex;align-items:center;gap:11px;margin-bottom:14px;} .convenio-inicial{ flex-shrink:0;width:38px;height:38px;border-radius:50%; background:var(--mostaza-suave);color:var(--marron); display:flex;align-items:center;justify-content:center; font-weight:800;font-size:1.05rem;line-height:1; } .convenio-cab h3{font-size:1.02rem;color:var(--marron);margin:0;line-height:1.3;} /* La ventaja: lo unico que se lee de verdad al recorrer la pagina. Antes era una pildora redonda, y un titular de dos lineas dentro de un border-radius de 999px sale como un globo deforme. Una barra con filete a la izquierda admite el texto que haga falta y se sigue leyendo como un cupon. */ .convenio-ventaja{ background:var(--mostaza-suave);border-left:3px solid var(--rosa-oscuro); border-radius:0 10px 10px 0;padding:10px 13px;margin:0 0 12px; color:var(--marron);font-weight:700;font-size:.93rem;line-height:1.4; } .convenio-letra{color:var(--texto-suave);font-size:.88rem;line-height:1.6;margin:0;} /* Al fondo de la tarjeta pase lo que pase, para que en una fila de tres los enlaces queden alineados aunque las letras pequenas midan distinto. */ .convenio-enlace{ margin-top:auto;padding-top:14px; color:var(--rosa-texto);font-weight:700;font-size:.85rem;text-decoration:none; align-self:flex-start; } .convenio-enlace:hover{text-decoration:underline;} @media(min-width:700px){ .descuentos-rejilla{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;} .convenio{padding:24px 22px;} .descuento-cabecera h2{font-size:1.12rem;} } /* Casilla de un formulario publico (un "acepto", un "si/no" del formulario que monta la asociacion). El texto va DENTRO del