/* ========================================================================== Brunch Inmobiliario · Fort Myers — sitio propio en brunch.homebymercyuribe.com Historia de este archivo, para que nadie lo "arregle" de vuelta: v1 usó la paleta del evento (petróleo + lima + naranja) DENTRO de la web de Merci, y ahí chocaba: al lado de su sitio editorial claro se sentía un flyer pegado. v2 lo pasó a la marca de ella y perdió toda la energía del evento. v3 (esta) vuelve a la paleta del evento — que es la que gustó — pero ya no vive dentro de su web: subdominio propio, sin menú de propiedades ni de "sobre mí". Sin su sitio al lado, los colores del volante dejan de pelearse con nada y funcionan como lo que son: la marca del evento. Sigue todo prefijado con .bru porque comparte los tokens de style.css. ========================================================================== */ .bru{ --pet:#0E3B49; /* petróleo profundo, el azul del fondo de las piezas */ --pet-2:#17586B; --lima:#C9D14B; /* el verde-lima de "Compra tu casa" */ --naranja:#F26522; /* los iconos y acentos del brochure */ --display:"Anton",Impact,"Haettenschweiler",sans-serif; } /* la condensada del logo. Solo titulares: en párrafos es ilegible */ .bru h1,.bru h2,.bru-dato b,.bru-quienes h3,.bru-ing h3,.bru-pendiente b{ font-family:var(--display);font-weight:400;text-transform:uppercase; letter-spacing:.005em;line-height:.94; } .bru h1 em{font-style:normal;color:var(--lima)} .bru h2{font-size:clamp(1.9rem,4.2vw,3.1rem);color:var(--pet)} .bru .kicker{color:var(--naranja)} /* Los datos del evento los inyecta el Worker en los dos idiomas y aquí se esconde el que no toca, mirando el que ya pone i18n.js. Se hace con CSS y no con JS para que no parpadee en la primera pintada. display:contents sube los bloques al flex del padre; si no, cada idioma formaría su propia caja y se rompería la fila. */ .bru-lang{display:contents} html[lang="en"] .bru-lang[data-lang="es"], html[lang="es"] .bru-lang[data-lang="en"]{display:none} /* ========================================================================== Cabecera y pie propios. En el subdominio NO hay menú del sitio de Merci: ni propiedades, ni sobre mí, ni método. Solo el evento. ========================================================================== */ .bru-head{ position:sticky;top:0;z-index:30;background:var(--pet); border-bottom:1px solid rgba(255,255,255,.12); } .bru-head .wrap{ display:flex;align-items:center;justify-content:space-between;gap:1.2rem; min-height:64px; } .bru-head-logo{display:flex;align-items:baseline;gap:.5rem;line-height:1} .bru-head-logo b{ font-family:var(--display);font-weight:400;font-size:1.25rem;color:#fff; text-transform:uppercase;letter-spacing:.01em; } .bru-head-logo span{ font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--lima); } .bru-head-right{display:flex;align-items:center;gap:1.4rem} .bru-head .lang{display:flex;align-items:center;gap:.4rem;font-size:.68rem;letter-spacing:.14em} .bru-head .lang button{ color:rgba(255,255,255,.55);text-transform:uppercase;padding:.2rem 0; border-bottom:1px solid transparent; } .bru-head .lang button[aria-current="true"]{color:var(--lima);border-bottom-color:var(--lima)} .bru-head .lang i{color:rgba(255,255,255,.3);font-style:normal} .bru-head .bru-btn{padding:.75rem 1.5rem;font-size:.64rem} .bru-foot{background:var(--pet);color:rgba(255,255,255,.6);padding:3.5rem 0 6rem} .bru-foot .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2.5rem} .bru-foot h3{ font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--lima); margin:0 0 .9rem;font-family:var(--sans);font-weight:500; } .bru-foot p{margin:0 0 .5rem;font-size:.9rem;line-height:1.6} .bru-foot a{color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.2)} .bru-foot a:hover{color:var(--lima);border-bottom-color:var(--lima)} .bru-foot-logo{width:150px;margin-bottom:1.2rem} .bru-foot-legal{ grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:1.4rem; margin-top:1rem;font-size:.75rem;color:rgba(255,255,255,.45); } /* ========================================================================== Hero ========================================================================== */ .bru-hero{ position:relative;padding:3.5rem 0 4.5rem;color:#fff;text-align:center; background:var(--pet) url("/img/brunch/fondo.webp") center/cover no-repeat; } /* la foto trae la casa a la izquierda; el velo deja leer el texto encima sin tener que recortar la imagen */ .bru-hero::before{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(14,59,73,.62),rgba(14,59,73,.9)); } .bru-hero .wrap{position:relative;max-width:820px} .bru-logo{width:min(300px,62vw);margin:.6rem auto .4rem;height:auto} .bru-kicker{ font-size:.68rem;letter-spacing:.28em;text-transform:uppercase; color:var(--lima);margin:0 0 .8rem; } .bru-hero h1{font-size:clamp(2.3rem,6.6vw,4.4rem);color:#fff;margin:0 0 1.1rem} .bru-lede{ font-size:1.05rem;line-height:1.65;color:rgba(255,255,255,.86); max-width:56ch;margin:0 auto; } .bru-datos{ display:flex;justify-content:center;flex-wrap:wrap;gap:.9rem; margin:2.2rem auto 0;max-width:720px; } .bru-dato{ flex:1 1 190px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18); padding:.95rem 1rem;text-align:left; } .bru-dato span{ display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase; color:var(--lima);margin-bottom:.35rem;font-family:var(--sans); } .bru-dato b{display:block;font-size:1.25rem;color:#fff} .bru-dato small{display:block;font-size:.8rem;color:rgba(255,255,255,.7);margin-top:.25rem} .bru-dato a{color:var(--lima);font-size:.74rem;border-bottom:1px solid rgba(201,209,75,.5)} /* cuando todavía no hay fecha confirmada */ .bru-pendiente{ flex:1 1 100%;background:rgba(242,101,34,.16);border:1px solid rgba(242,101,34,.5); padding:1.2rem;text-align:center; } .bru-pendiente b{font-size:1.3rem;color:#fff;display:block} .bru-pendiente small{display:block;color:rgba(255,255,255,.8);font-size:.88rem;margin-top:.35rem} .bru-acciones{margin-top:2.2rem;display:grid;justify-items:center;gap:.7rem} .bru-btn{ display:inline-flex;align-items:center;justify-content:center; background:var(--naranja);color:#fff;padding:1.05rem 2.6rem; font-size:.74rem;letter-spacing:.2em;text-transform:uppercase; border:0;cursor:pointer;transition:transform .25s var(--ease),background .25s var(--ease); } .bru-btn:hover{background:#d9541a;transform:translateY(-2px)} .bru-btn--full{width:100%;padding:1.1rem} .bru-nota{font-size:.8rem;color:rgba(255,255,255,.62)} /* ========================================================================== Secciones ========================================================================== */ .bru-sec{padding:5.5rem 0} .bru-sec--oscura{background:var(--pet);color:rgba(255,255,255,.82)} .bru-sec--oscura h2{color:#fff} .bru-sec--oscura .kicker{color:var(--lima)} .bru-sec--hueso{background:var(--bone)} .bru-lede2{max-width:60ch;margin:1.1rem 0 0;font-size:1.02rem} .bru-dos{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:start} .bru-dos p{margin:0 0 1rem} .bru-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3.5rem} .bru-tres article{border-top:2px solid var(--lima);padding-top:1.1rem} .bru-tres h3{ font-size:1.15rem;color:var(--pet);margin:0 0 .5rem;font-family:var(--sans); font-weight:500;letter-spacing:.01em; } .bru-tres p{margin:0;font-size:.94rem} /* ---------- quiénes están ---------- */ .bru-quienes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 2rem;margin-top:3rem} .bru-quienes article{border-top:1px solid rgba(255,255,255,.2);padding-top:1.1rem} .bru-quienes h3{font-size:1.1rem;color:var(--lima);margin:0 0 .45rem} .bru-quienes p{margin:0;font-size:.92rem;color:rgba(255,255,255,.72)} /* ---------- ingredientes ---------- */ .bru-ing{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:3rem} .bru-ing article{background:var(--pet);color:#fff;padding:2rem} .bru-ing article:nth-child(2){background:var(--pet-2)} .bru-ing h3{font-size:1.25rem;color:var(--lima);margin:0 0 1.2rem} .bru-ing ul{margin:0;padding:0;list-style:none;display:grid;gap:.85rem} .bru-ing li{ position:relative;padding-left:1.6rem;font-size:.95rem;color:rgba(255,255,255,.86); line-height:1.5; } .bru-ing li::before{ content:"";position:absolute;left:0;top:.55em;width:9px;height:9px; background:var(--naranja); } .bru-ing-nota{ margin:1.6rem 0 0;padding-left:1.1rem;border-left:3px solid var(--naranja); font-size:.96rem;color:var(--ink-2);max-width:62ch; } /* ---------- galería ---------- */ /* Las fotos son de la edición anterior y salen del PDF del organizador: entre 400 y 500px de ancho. NO se escalan hacia arriba; la grilla se adapta a eso. */ .bru-galeria{ display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.8rem;margin-top:2.6rem; } .bru-galeria img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--bone-2)} .bru-galeria img:nth-child(4){aspect-ratio:3/2;grid-column:span 2} /* ---------- merci ---------- */ /* Papel a propósito: su foto viene con fondo blanco de estudio y sobre cualquier otro tono se le vería el recuadro. */ .bru-yo{background:var(--paper)} .bru-yo .bru-dos{grid-template-columns:.7fr 1.3fr;align-items:center;gap:3.5rem} .bru-yo-foto img{width:100%;max-width:340px} .bru-org{ font-size:.88rem;color:var(--muted);border-top:1px solid var(--line); padding-top:1rem;margin-top:1.6rem; } /* ---------- formulario ---------- */ .bru-form-wrap{max-width:680px} .bru-form{display:grid;gap:1.2rem;margin-top:2.4rem} .bru-fila{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} .bru-form label{display:grid;gap:.4rem;min-width:0} .bru-form label span{ font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lima); } .bru-form input,.bru-form select{ background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28); color:#fff;font-family:var(--sans);font-size:1rem;padding:.65rem 0;border-radius:0; min-width:0; } .bru-form select option{color:var(--ink)} .bru-form input:focus,.bru-form select:focus{outline:none;border-bottom-color:var(--lima)} .bru-privacidad{font-size:.76rem;color:rgba(255,255,255,.5);margin:0;text-align:center} .bru-msg{margin:0;font-size:.95rem;text-align:center;min-height:1.4em;color:var(--lima)} .bru-msg.mal{color:#FFB4A0} /* ---------- faq ---------- */ .bru-faq{max-width:760px} .bru-faq details{border-bottom:1px solid var(--line);padding:1.2rem 0} .bru-faq summary{ cursor:pointer;list-style:none;font-size:1.05rem;color:var(--ink); display:flex;justify-content:space-between;gap:1rem;align-items:center; } .bru-faq summary::-webkit-details-marker{display:none} .bru-faq summary::after{content:"+";color:var(--naranja);font-size:1.3rem;line-height:1} .bru-faq details[open] summary::after{content:"–"} .bru-faq details p{margin:.9rem 0 0;font-size:.96rem;max-width:64ch} .bru-eho{margin-top:2.5rem;font-size:.75rem;color:var(--muted);text-align:center} /* ---------- barra fija de móvil ---------- */ /* Propia del evento: en el subdominio no existe la del sitio de Merci. */ .bru-barra{ position:fixed;left:0;right:0;bottom:0;z-index:35;display:none; gap:.6rem;padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); background:rgba(14,59,73,.97);border-top:1px solid rgba(255,255,255,.14); } .bru-barra .bru-btn{flex:1;padding:.95rem} .bru-barra__wa{ display:grid;place-items:center;width:52px;border:1px solid rgba(255,255,255,.25); color:#fff;flex:0 0 auto; } /* ========================================================================== Móvil ========================================================================== */ @media (max-width:900px){ .bru-dos,.bru-yo .bru-dos{grid-template-columns:1fr;gap:1.8rem} .bru-quienes,.bru-tres{grid-template-columns:1fr 1fr} .bru-yo-foto img{max-width:260px} .bru-foot .wrap{grid-template-columns:1fr 1fr} } @media (max-width:620px){ .bru-sec{padding:3.6rem 0} .bru-hero{padding:2.5rem 0 3.2rem} .bru-lede,.bru-lede2{font-size:.97rem;line-height:1.6} .bru-quienes,.bru-tres,.bru-ing,.bru-fila{grid-template-columns:1fr} .bru-quienes,.bru-tres{gap:1.4rem;margin-top:2.2rem} .bru-datos{gap:.6rem} .bru-dato{flex:1 1 100%} .bru-acciones .bru-btn{width:100%} .bru-ing article{padding:1.5rem} .bru-galeria{grid-template-columns:1fr 1fr;gap:.5rem} .bru-galeria img:nth-child(4){grid-column:span 2} /* el formulario va sobre fondo oscuro y el teclado tapa medio campo: más aire para que se vea cuál estás llenando */ .bru-form{gap:1.5rem} .bru-foot{padding-bottom:7rem} /* hueco para la barra fija */ .bru-foot .wrap{grid-template-columns:1fr;gap:1.8rem} /* en el celular el botón de arriba estorba: ya está la barra fija abajo */ .bru-head .bru-btn{display:none} .bru-head-logo b{font-size:1.02rem} .bru-head-logo span{display:none} .bru-barra{display:flex} }