/* sections.css — layout de cada sección concreta: nav, hero, paneles, CTA final, footer y botón flotante de WhatsApp. Depende de css/tokens.css, css/base.css y css/components.css. */ /* ============ fondo animado (experimental) ============ Lo crea js/fondo.js. z-index negativo: queda detrás de todo el contenido pero encima del fondo del . Si se quita el módulo, sobra esta regla. */ .fondo{ position:fixed; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; } /* ============ nav ============ */ .nav{ position:fixed; inset:0 0 auto 0; z-index:var(--z-nav); padding-block:1rem; border-bottom:1px solid transparent; transition:background var(--t-mid),backdrop-filter var(--t-mid), border-color var(--t-mid),padding var(--t-mid); &.scrolled{ background:var(--black-90); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line); padding-block:.65rem; } &.scrolled .brand img{height:26px} } .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem} .nav-actions{display:flex;align-items:center;gap:.75rem} .brand{ display:flex; align-items:center; gap:.7rem; & img{height:34px;width:auto;transition:height var(--t-mid)} } .brand-word{ font-family:var(--display); font-variation-settings:"wdth" var(--wdth-narrow); text-transform:uppercase; letter-spacing:.02em; font-size:.95rem; font-weight:500; line-height:1; white-space:nowrap; & em{color:var(--green);font-style:normal} } @media(max-width:420px){ .brand-word{display:none} } .nav-links{ display:none; gap:1.4rem; align-items:center; & a{ position:relative; padding-block:.35rem; white-space:nowrap; font-family:var(--mono); font-size:var(--fs-eyebrow); letter-spacing:.14em; text-transform:uppercase; color:var(--off-white); } & a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--green); transition:width .3s var(--ease); } & a:hover::after{width:100%} } /* ocho enlaces + botón: bajo 1240 px va el menú de hamburguesa */ @media(min-width:1240px){ .nav-links{display:flex} } .nav-cta{display:none} @media(min-width:640px){ .nav-cta{display:inline-flex} } .burger{ display:grid; gap:5px; padding:.55rem; border:1px solid var(--line); border-radius:var(--r-btn); & span{ display:block; width:18px; height:1.5px; background:var(--white); transition:.3s var(--ease); } &.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} &.open span:nth-child(2){opacity:0} &.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} } @media(min-width:1000px){ .burger{display:none} } .mobile-menu{ position:fixed; inset:0; z-index:var(--z-menu); background:var(--black); display:grid; align-content:center; gap:.25rem; padding:6rem var(--gutter) 3rem; opacity:0; transition:var(--t-mid) var(--ease); /* Cerrado: invisible y fuera del flujo de interacción. El atributo `inert` (lo aplica js/nav.js) lo saca además del foco. */ &:not(.open){visibility:hidden;pointer-events:none} &.open{opacity:1;visibility:visible} /* Solo los enlaces de navegación llevan el tamaño grande. En el original esta regla alcanzaba también al botón (que es un ): con white-space:nowrap a 26px medía 451px y se salía de un viewport de 375. */ & > a:not(.btn){ font-family:var(--display); font-variation-settings:"wdth" var(--wdth-wide); text-transform:uppercase; font-size:clamp(1.6rem,7vw,2.4rem); padding-block:.5rem; border-bottom:1px solid var(--line); } & .btn{margin-top:2rem;justify-self:start} } /* ============ hero ============ */ /* La foto va enmarcada dentro del contenedor, no a sangre completa: la barra de navegación queda sobre fondo negro y la imagen es un objeto más de la página, no el escenario. Pensado para una foto del recinto. */ /* El marco empieza arriba del todo y la barra de navegación queda encima de la foto (como en la referencia). Al hacer scroll, la barra gana fondo. */ .hero{ padding-top:.5rem; /* el marco usa casi todo el ancho: menos margen que el resto de la página */ & > .container{max-width:none;padding-inline:.5rem} /* el titular lleva un desgaste fino (máscara de ruido), como tinta sobre papel áspero */ & h1{margin:.9rem 0 1.1rem;max-width:14ch;mask-image:var(--grunge);mask-size:220px 220px;text-shadow:var(--shadow-text)} & .lead{max-width:50ch} /* sobre la foto: verde, más grueso y con sombra para que no se pierda */ & .eyebrow{color:var(--green);font-weight:700;font-size:var(--fs-label);text-shadow:var(--shadow-text)} } .hero-frame{ position:relative; min-height:min(88svh,780px); display:flex; align-items:flex-end; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--panel); } .hero-media{ position:absolute; inset:0; & img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; transition:filter 1.1s var(--ease),transform 1.1s var(--ease); } &::after{ content:""; position:absolute; inset:0; background:var(--scrim-hero); } } /* La foto se ve nítida al llegar y se desenfoca al empezar a hacer scroll (js/nav.js pone .desenfocado en .hero-frame pasados 40 px). */ .hero-frame.desenfocado .hero-media img{filter:blur(7px) saturate(.85);transform:scale(1.04)} .hero-inner{ position:relative; z-index:2; max-width:760px; padding:clamp(7rem,16vw,10rem) clamp(1.5rem,4vw,3.5rem) clamp(1.75rem,4vw,3rem); } /* Capa de luz animada sobre la foto (js/hero-fx.js). Se mezcla en modo pantalla: solo aclara, nunca ensucia la foto. */ .hero-fx{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; mix-blend-mode:screen; opacity:.4; } /* Animación de entrada del titular: js/texto.js envuelve cada palabra. */ .palabra{ display:inline-block; opacity:0; transform:translateY(.35em) rotate(1.5deg); animation:palabra .7s var(--ease) forwards; animation-delay:calc(.12s + var(--i) * .07s); } @keyframes palabra{to{opacity:1;transform:none}} .hero .eyebrow{ opacity:0; animation:fade-in .6s var(--ease) .05s forwards; } .hero .lead,.hero .hero-actions{ opacity:0; animation:fade-up .8s var(--ease) .7s forwards; } .hero .hero-actions{animation-delay:.85s} @keyframes fade-in{to{opacity:1}} @keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .palabra,.hero .eyebrow,.hero .lead,.hero .hero-actions{opacity:1;transform:none;animation:none} } .hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem} /* ============ cinta (ticker) ============ Banda clara con texto en display que se desplaza. Dos copias del contenido y una animación que recorre el 50%: bucle sin costura. */ .ticker{ display:flex; overflow:hidden; margin-top:var(--grid-gap); border-block:1px solid var(--line); color:var(--off-white); user-select:none; /* los extremos se desvanecen en vez de cortar el texto */ mask-image:linear-gradient(90deg,transparent,var(--black) 8%,var(--black) 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,var(--black) 8%,var(--black) 92%,transparent); } .ticker-track{ display:flex; align-items:center; flex:none; gap:0; padding-block:.6rem; animation:ticker var(--ticker-dur) linear infinite; & span{ font-family:var(--display); font-variation-settings:"wdth" var(--wdth-condensed); font-size:clamp(.95rem,1.3vw,1.1rem); font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; padding-inline:1.75rem; } & i{ width:6px; height:6px; background:var(--orange); transform:rotate(45deg); flex:none; } } .ticker:hover .ticker-track{animation-play-state:paused} @keyframes ticker{to{transform:translateX(-100%)}} @media(prefers-reduced-motion:reduce){ .ticker{overflow-x:auto} .ticker-track{animation:none} } /* ============ progreso de lectura ============ Línea verde arriba que crece con el scroll. Sin JS: animation-timeline. Donde no existe la propiedad, la línea queda a ancho cero y no se ve. */ .progreso{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:var(--z-skip); background:var(--green); transform-origin:left; transform:scaleX(0); pointer-events:none; } @supports (animation-timeline: scroll()){ .progreso{animation:progreso linear both;animation-timeline:scroll(root)} @keyframes progreso{from{transform:scaleX(0)}to{transform:scaleX(1)}} } /* ============ panel claro (el sistema) ============ */ .panel-light{ background:var(--white); color:var(--black); border-radius:var(--r-lg); padding:var(--pad-panel); & .eyebrow{color:var(--green-deep)} & .accent{color:var(--green-dark)} & .lead{color:var(--ink-panel)} & .small{color:var(--ink-panel-muted)} & h2{margin:.8rem 0 1rem} } /* ============ split con imagen + panel oscuro ============ */ .split{display:grid;gap:var(--grid-gap);align-items:stretch} @media(min-width:960px){ .split{grid-template-columns:1fr 1.05fr} } /* Foto al lado del panel de texto, a toda la altura del panel. */ .split-photo{ position:relative; margin:0; min-height:360px; overflow:hidden; border-radius:var(--r-lg); background:var(--panel-2); & picture,& img{display:block;width:100%;height:100%} & img{object-fit:cover;object-position:50% 50%} /* Ken Burns lento (zoom + paneo lateral) para la imagen de Algarrobo. */ & img.kb{ transform-origin:50% 55%; animation:kenburns 26s ease-in-out infinite alternate; } } @keyframes kenburns{ from{transform:scale(1.02) translateX(-1.5%)} to{transform:scale(1.14) translateX(1.5%)} } /* Leyenda sobre la foto del split (adelanto de Algarrobo). */ .split-caption{ position:absolute; left:1rem; bottom:1rem; padding:.3rem .55rem; border-radius:var(--r-sm); background:var(--black-90); font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } /* Etiqueta en la esquina del hero (página Algarrobo: "imagen conceptual"). */ .hero-tag{ position:absolute; right:1rem; bottom:1rem; z-index:2; padding:.3rem .55rem; border-radius:var(--r-sm); background:var(--black-90); font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .lead-center{max-width:52ch;margin-inline:auto} .btn-row-center{justify-content:center} /* Enlace destacado en la barra (nueva sede). */ .nav-links .nav-new{color:var(--green)} .panel-dark{ display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--pad-panel-dark); background:var(--surface-panel); & h2{margin:.9rem 0 1rem} & h4{margin:.9rem 0 .75rem} } /* ============ CTA final ============ */ .cta{ position:relative; overflow:hidden; border:1px solid var(--line-green); border-radius:var(--r-lg); background:var(--surface-cta); padding:var(--pad-cta); text-align:center; & h2{max-width:20ch;margin:1rem auto 2rem} & > :not(.cta-media){position:relative;z-index:1} } /* Foto de la fachada detrás del CTA, con el mismo velo del hero. */ .cta-media{ position:absolute; inset:0; & img{width:100%;height:100%;object-fit:cover;object-position:50% 60%} &::after{content:"";position:absolute;inset:0;background:var(--scrim-cta)} } /* Foto chica junto a la dirección, en Contacto. */ .info-photo{ display:block; margin-top:1rem; aspect-ratio:3/2; max-width:360px; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); & img{width:100%;height:100%;object-fit:cover} } /* ============ footer ============ */ .footer{ border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,4.5rem) 2rem; & h5{ font-family:var(--mono); font-size:var(--fs-tiny); letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); font-weight:400; margin-bottom:1rem; } } .footer-grid{display:grid;gap:2.5rem} @media(min-width:820px){ .footer-grid{grid-template-columns:1.2fr .8fr 1fr} } .footer-logo{width:200px;max-width:60%;height:auto;margin-bottom:1.5rem} .footer-links{ display:grid; gap:.6rem; & a{font-size:var(--fs-small);color:var(--off-white)} & a:hover{color:var(--green)} } .footer-about{max-width:44ch} .socials{ display:flex; gap:.75rem; margin-top:1rem; & a{ width:36px; height:36px; border:1px solid var(--line); border-radius:var(--r-sm); display:grid; place-items:center; transition:var(--t-fast) var(--ease); } & a:hover{border-color:var(--green);color:var(--green)} & svg{width:16px;height:16px} } .footer-bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; border-top:1px solid var(--line); margin-top:3rem; padding-top:1.5rem; } /* ============ página 404 ============ */ .not-found{ min-height:100svh; display:flex; align-items:center; & .brand{margin-bottom:clamp(2.5rem,8vw,5rem)} & h1{margin:1rem 0 1.5rem} } /* ============ WhatsApp flotante ============ */ .wa{ position:fixed; right:var(--float-offset); bottom:var(--float-offset); transition:bottom var(--t-mid) var(--ease),background var(--t-fast) var(--ease); z-index:var(--z-float); display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:var(--r-btn); background:var(--green); color:var(--on-green); font-family:var(--mono); font-size:var(--fs-tiny); letter-spacing:.1em; text-transform:uppercase; font-weight:600; box-shadow:var(--shadow-float); transition:background var(--t-fast) var(--ease); & svg{width:16px;height:16px} &:hover{background:var(--green-bright)} } /* Con la promo fija visible, el botón sube para no taparla. */ body.con-promo .wa{bottom:calc(var(--float-offset) + 4.25rem)} /* En móvil la promo ocupa tres filas (etiqueta, texto, botones): ~9 rem. */ @media(max-width:640px){ body.con-promo .wa{bottom:calc(var(--float-offset) + 9rem)} }