/* ============================================================ VIVA REVILLA — style.css Paleta, tipografía e interfaz completa. El CSS crítico (nav + hero) va inline en de index.html. ============================================================ */ :root{ --deep:#0A1628; --ocean:#03274A; --mid:#003D6B; --cyan:#00B4D8; --cyan-light:#90E0EF; --white:#F0F4F8; --muted:#8BA3BC; --gold:#C9A84C; --card:#0E1E35; --nav-h:72px; --maxw:1180px; --pad-y:clamp(4.5rem,10vw,8rem); } /* ---------- Base tipográfica ---------- */ body{font-family:'Inter',system-ui,sans-serif} h1,h2,h3{font-family:'Playfair Display',serif; line-height:1.1} ::selection{background:var(--cyan); color:var(--deep)} /* Focus visible accesible */ a:focus-visible, button:focus-visible, label:focus-visible, .btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px; } /* ---------- Layout helpers ---------- */ .container{width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:clamp(1.2rem,5vw,3rem)} .container--narrow{max-width:820px} .center{text-align:center} .section{padding-block:var(--pad-y); position:relative} .section--deep{background:var(--deep)} .section--ocean{background:var(--ocean)} /* ---------- Tipos de texto recurrentes ---------- */ .eyebrow{ font-size:.74rem; letter-spacing:3px; text-transform:uppercase; color:var(--cyan); font-weight:600; margin-bottom:1rem; } .title{ font-weight:700; color:var(--white); font-size:clamp(1.9rem,4.6vw,3.1rem); letter-spacing:-.5px; margin-bottom:1.5rem; max-width:18ch; } .center .title{margin-inline:auto} .title--lg{font-size:clamp(2.2rem,5.5vw,3.8rem); max-width:20ch} .lead{font-size:clamp(1.05rem,2vw,1.22rem); color:var(--white); opacity:.9; font-weight:300; margin-bottom:1.2rem; max-width:62ch} .section p{color:var(--muted); max-width:62ch} .section p.lead{color:var(--white)} /* ---------- Botones ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-weight:600; font-size:.95rem; letter-spacing:.3px; padding:.85rem 1.7rem; border-radius:4px; cursor:pointer; border:1px solid transparent; transition:background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .btn--gold{background:var(--gold); color:var(--deep)} .btn--gold:hover{background:#dcbb5e; transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,168,76,.28)} .btn--ghost{background:transparent; color:var(--white); border-color:rgba(144,224,239,.4)} .btn--ghost:hover{border-color:var(--cyan); color:var(--cyan-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,180,216,.18)} .btn--lg{padding:1.05rem 2.4rem; font-size:1.05rem; margin-top:1rem} /* ============================================================ NAV (extiende el crítico inline) ============================================================ */ .nav__menu{display:flex; align-items:center; gap:2.2rem} .nav__links{list-style:none; display:flex; gap:1.8rem} .nav__links a{font-size:.92rem; font-weight:500; color:var(--white); opacity:.85; transition:opacity .2s, color .2s} .nav__links a:hover{opacity:1; color:var(--cyan-light)} .nav__cta{padding:.6rem 1.3rem; font-size:.88rem} /* Hamburguesa (CSS puro, checkbox hack) */ .nav__burger{display:none; flex-direction:column; gap:5px; width:30px; cursor:pointer; padding:4px; z-index:120} .nav__burger span{display:block; height:2px; width:100%; background:var(--white); border-radius:2px; transition:transform .3s ease, opacity .3s ease} /* ============================================================ HERO (extiende el crítico inline) ============================================================ */ .hero__scroll{ position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%); width:1px; height:64px; background:rgba(144,224,239,.25); overflow:hidden; } .hero__scroll::after{ content:''; position:absolute; inset:0; background:var(--cyan); transform-origin:top; animation:scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse{ 0%{transform:scaleY(0); opacity:0} 35%{transform:scaleY(1); opacity:1} 70%,100%{transform:scaleY(1) translateY(64px); opacity:0} } /* ============================================================ SECCIÓN 1 — ARCHIPIÉLAGO ============================================================ */ .archipielago{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4.5rem); align-items:center} .stats{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem} .stat-card{ background:var(--card); border:1px solid rgba(144,224,239,.1); border-radius:8px; padding:1.6rem 1.4rem; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .stat-card:hover{transform:translateY(-6px); border-color:var(--cyan); box-shadow:0 12px 40px rgba(0,180,216,.15)} .stat-card__num{font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(2rem,4vw,2.7rem); color:var(--cyan-light); display:block; line-height:1} .stat-card__unit{font-family:'Space Mono',monospace; font-size:.8rem; color:var(--cyan); margin-left:.2rem} .stat-card__label{display:block; margin-top:.6rem; font-size:.86rem; color:var(--muted); line-height:1.45} .stat-card__label em{color:var(--cyan-light); font-style:normal} /* ============================================================ SECCIÓN 2 — AMENAZA (parallax suave) ============================================================ */ .section--threat{ background:linear-gradient(180deg,rgba(10,22,40,.92),rgba(10,22,40,.86)), url('images/sharks-school.jpg') center/cover no-repeat; background-attachment:fixed; } .blockquote{ margin-top:2.5rem; padding:1.4rem 0 1.4rem 1.8rem; border-left:3px solid var(--cyan); font-family:'Playfair Display',serif; font-style:italic; font-weight:400; font-size:clamp(1.3rem,3vw,1.9rem); line-height:1.4; color:var(--white); max-width:30ch; } /* ============================================================ SECCIÓN 3 — MISIÓN (lista de objetivos) ============================================================ */ .goals{list-style:none; margin-top:2.5rem; display:grid; gap:1.6rem} .goal{display:flex; gap:1.2rem; padding-left:1.4rem; border-left:2px solid rgba(0,180,216,.25)} .goal__icon{color:var(--cyan); font-size:1.1rem; line-height:1.6; flex-shrink:0} .goal h3{font-family:'Inter',sans-serif; font-weight:600; font-size:1.12rem; color:var(--white); margin-bottom:.3rem} .goal p{font-size:.95rem} /* ============================================================ SECCIÓN 4 — PROYECTO LEWINI ============================================================ */ .lewini{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center} .lewini__media img{border-radius:10px; width:100%; height:auto; object-fit:cover; border:1px solid rgba(144,224,239,.12)} .lewini__subtitle{font-family:'Playfair Display',serif; font-style:italic; color:var(--gold); font-size:1.15rem; margin-bottom:1.2rem} .pillars{display:grid; gap:1.1rem; margin-top:2rem} .pillar{ background:var(--card); border:1px solid rgba(144,224,239,.1); border-left:3px solid var(--cyan); border-radius:6px; padding:1.4rem 1.5rem; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .pillar:hover{transform:translateY(-6px); box-shadow:0 12px 40px rgba(0,180,216,.15)} .pillar__icon{font-size:1.4rem; display:block; margin-bottom:.5rem} .pillar h3{font-family:'Inter',sans-serif; font-weight:600; font-size:1.1rem; color:var(--white); margin-bottom:.4rem} .pillar p{font-size:.92rem} /* ============================================================ SECCIÓN 5 — MOMENTO / NATGEO ============================================================ */ .section--moment{ background:linear-gradient(180deg,rgba(10,22,40,.86),rgba(3,39,74,.9)), url('images/underwater-wide.jpg') center/cover no-repeat; background-attachment:fixed; } .badge{ display:inline-block; margin-top:2rem; font-family:'Space Mono',monospace; font-size:.9rem; letter-spacing:1px; color:var(--gold); border:1px solid var(--gold); border-radius:999px; padding:.7rem 1.6rem; background:rgba(201,168,76,.06); } /* ============================================================ SECCIÓN 6 — EQUIPO ============================================================ */ .team{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-top:3rem} .member{ background:var(--card); border:1px solid rgba(144,224,239,.1); border-radius:10px; padding:2rem 1.8rem; text-align:center; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .member:hover{transform:translateY(-6px); border-color:var(--cyan); box-shadow:0 12px 40px rgba(0,180,216,.18)} .member__photo{ width:130px; height:130px; aspect-ratio:1/1; border-radius:50%; object-fit:cover; margin:0 auto 1.2rem; border:2px solid var(--cyan); filter:grayscale(20%); transition:filter .3s ease, transform .3s ease; } .member:hover .member__photo{filter:grayscale(0%); transform:scale(1.03)} .member__name{font-weight:700; font-size:1.3rem; color:var(--white); margin-bottom:.3rem} .member__role{font-family:'Space Mono',monospace; font-size:.78rem; letter-spacing:1px; color:var(--gold); margin-bottom:1rem; text-transform:uppercase} .member__bio{font-size:.92rem; color:var(--muted); max-width:46ch; margin-inline:auto} /* Divider */ .divider{height:1px; background:linear-gradient(90deg,transparent,rgba(144,224,239,.25),transparent); margin:4rem 0 3rem} /* Asesores */ .advisors{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem} .advisor{ display:flex; gap:1.4rem; align-items:center; background:var(--card); border:1px solid rgba(144,224,239,.1); border-radius:10px; padding:1.6rem; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .advisor:hover{transform:translateY(-6px); border-color:var(--cyan); box-shadow:0 12px 40px rgba(0,180,216,.15)} .advisor__photo{ width:96px; height:96px; aspect-ratio:1/1; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--cyan); filter:grayscale(20%); transition:filter .3s ease, transform .3s ease; } .advisor:hover .advisor__photo{filter:grayscale(0%); transform:scale(1.03)} .advisor .member__bio{text-align:left; margin-inline:0} .advisor .member__role{margin-bottom:.5rem} /* ============================================================ SECCIÓN 7 — FONDO / GOBERNANZA ============================================================ */ .governance{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2.6rem} .gov-card{ background:var(--card); border:1px solid rgba(144,224,239,.1); border-radius:8px; padding:1.6rem; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .gov-card:hover{transform:translateY(-6px); border-color:var(--cyan); box-shadow:0 12px 40px rgba(0,180,216,.15)} .gov-card h3{font-family:'Inter',sans-serif; font-weight:600; font-size:1.05rem; color:var(--cyan-light); margin-bottom:.5rem} .gov-card p{font-size:.9rem} /* ============================================================ SECCIÓN 8 — DONACIÓN ============================================================ */ .section--donate{background:linear-gradient(135deg,var(--ocean) 0%,var(--mid) 100%)} .donate__note{ font-family:'Space Mono',monospace; font-size:.78rem; letter-spacing:.5px; color:var(--cyan-light); opacity:.75; margin:1.6rem auto 0; max-width:60ch; } /* ============================================================ FOOTER ============================================================ */ .footer{background:#06101D; padding-block:3rem 2.5rem; position:relative} .footer__divider{height:1px; background:linear-gradient(90deg,transparent,rgba(0,180,216,.3),transparent); margin-bottom:3rem} .footer__grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; align-items:center} .footer__brand{display:flex; align-items:center; gap:.6rem; font-family:'Playfair Display',serif; font-weight:700; font-size:1.15rem; margin-bottom:.6rem} .footer__tagline{font-size:.86rem; color:var(--muted); max-width:30ch} .footer__coords{font-family:'Space Mono',monospace; color:var(--cyan-light); letter-spacing:1.5px; font-size:.9rem; margin-bottom:.3rem} .footer__place{font-size:.82rem; color:var(--muted)} .footer__col--right{text-align:right; color:var(--muted); font-size:.85rem} /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal{opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease} .reveal.visible{opacity:1; transform:none} .reveal-delay-1{transition-delay:.12s} .reveal-delay-2{transition-delay:.24s} .reveal-delay-3{transition-delay:.36s} /* ============================================================ RESPONSIVE — Tablet (≤900px) ============================================================ */ @media (max-width:900px){ .archipielago{grid-template-columns:1fr; gap:2.5rem} .lewini{grid-template-columns:1fr; gap:2.5rem} .lewini__media{max-width:420px} .advisors{grid-template-columns:1fr} .footer__grid{grid-template-columns:1fr; text-align:center; gap:2rem} .footer__col--right{text-align:center} .footer__tagline{margin-inline:auto} .footer__brand{justify-content:center} /* Nav móvil */ .nav__burger{display:flex} .nav__menu{ position:fixed; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:rgba(10,22,40,.985); backdrop-filter:blur(14px); border-bottom:1px solid rgba(144,224,239,.1); max-height:0; overflow:hidden; transition:max-height .35s ease; } .nav__links{flex-direction:column; gap:0; width:100%} .nav__links li{width:100%} .nav__links a{display:block; padding:1rem clamp(1.2rem,5vw,3rem); width:100%; border-bottom:1px solid rgba(144,224,239,.06)} .nav__cta{margin:1rem clamp(1.2rem,5vw,3rem) 1.4rem; width:calc(100% - 2*clamp(1.2rem,5vw,3rem))} .nav-toggle:checked ~ .nav .nav__menu{max-height:80vh} /* Hamburguesa → X */ .nav-toggle:checked ~ .nav .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle:checked ~ .nav .nav__burger span:nth-child(2){opacity:0} .nav-toggle:checked ~ .nav .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } /* ============================================================ RESPONSIVE — Mobile (≤600px) ============================================================ */ @media (max-width:600px){ .hero{text-align:center; align-items:center} .hero__tagline{margin-inline:auto} .hero__cta{justify-content:center} .team{grid-template-columns:1fr} .governance{grid-template-columns:1fr 1fr} /* gobernanza 2x2 se mantiene compacto */ .goal{padding-left:1rem} .advisor{flex-direction:column; text-align:center} .advisor .member__bio{text-align:center} /* Stats: se mantiene 2x2 según spec */ .stats{gap:.8rem} .stat-card{padding:1.2rem 1rem} /* Desactivar parallax en móvil */ .hero, .section--threat, .section--moment{background-attachment:scroll} } /* ============================================================ PREFERS-REDUCED-MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{opacity:1; transform:none} .hero, .section--threat, .section--moment{background-attachment:scroll} }