/* =========================== ARJA SOLUTIONS – tokens base =========================== */ /* 1) Variables (tokens) */ :root { /* Marca (desde el logo) */ --arja-blue: #3e9dd8; --arja-green: #33a836; --arja-orange:#f07f1c; --arja-red: #e7225a; --arja-gray: #575757; /* Semánticos */ --color-primary: var(--arja-blue); --color-secondary: var(--arja-green); --color-accent: var(--arja-orange); --color-danger: var(--arja-red); /* Neutros */ --color-bg: #ffffff; --color-ink: #111111; --color-text: var(--arja-gray); --color-muted:#8a8a8a; --color-border: #e7e7e7; /* Tipografías (Google Fonts cargadas en el ) */ --font-headings: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-body: "Source Sans Pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Tipografía – escalas fluidas */ --fs-base: 16px; --fs-100: clamp(0.9rem, 0.85rem + 0.2vw, 1rem); --fs-200: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); --fs-300: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); --fs-400: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem); /* h5/lead */ --fs-500: clamp(1.5rem, 1.35rem + 0.9vw, 1.875rem); /* h4 */ --fs-600: clamp(1.875rem, 1.6rem + 1.2vw, 2.25rem); /* h3 */ --fs-700: clamp(2.25rem, 1.9rem + 1.6vw, 2.75rem); /* h2 */ --fs-800: clamp(2.75rem, 2.2rem + 2.2vw, 3.5rem); /* h1 */ /* Espaciado (8pt system) */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* Bordes y sombras */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-sm: 0 4px 12px rgba(0,0,0,.08); --shadow-md: 0 8px 24px rgba(0,0,0,.12); --shadow-lg: 0 16px 40px rgba(0,0,0,.16); /* Animación */ --easing: cubic-bezier(.2,.6,.2,1); --dur-1: 150ms; --dur-2: 300ms; --dur-3: 500ms; /* Layout */ --container-max: 1200px; --gutter: 1rem; /* Breakpoints */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; /* Accesibilidad */ --focus-ring: 0 0 0 3px rgba(62,157,216,.4); } /* 2) Reset + base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); color: var(--color-text); background: var(--color-bg); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; } /* 3) Tipografía de títulos */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); color: var(--color-ink); font-family: var(--font-headings); line-height: 1.15; } h1 { font-size: var(--fs-800); } h2 { font-size: var(--fs-700); } h3 { font-size: var(--fs-600); } h4 { font-size: var(--fs-500); } h5 { font-size: var(--fs-400); } .lead { font-size: var(--fs-400); color: var(--color-ink); } /* 4) Contenedor y secciones */ .container { width: min(100% - 2*var(--gutter), var(--container-max)); margin-inline: auto; } .section { padding-block: var(--space-7); } .section--tight { padding-block: var(--space-6); } .section--alt { background: #f7fafc; } /* 5) Botones base */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.2rem; border-radius: var(--radius-md); border: 1px solid transparent; font-weight: 600; transition: background var(--dur-2) var(--easing), transform var(--dur-1) var(--easing), box-shadow var(--dur-2); cursor: pointer; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { box-shadow: var(--shadow-md); } .btn-secondary { background: var(--color-secondary); color: #fff; } .btn-ghost { background: transparent; color: var(--color-primary); border-color: currentColor; } /* 6) Tarjetas (para beneficios, partners, etc.) */ .card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); } /* 7) Utilidades rápidas */ .text-center { text-align: center; } .mb-0{ margin-bottom: 0!important; } .mb-2{ margin-bottom: var(--space-2)!important; } .mb-4{ margin-bottom: var(--space-4)!important; } .mb-6{ margin-bottom: var(--space-6)!important; } .mt-6{ margin-top: var(--space-6)!important; } .hidden { display: none!important; } /* 8) Preferencia de usuario: reducir movimiento */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* =========================== FIN tokens base =========================== */ /* ========================= HEADER (Topbar + Navbar) ========================= */ /* ===== Topbar ===== */ .topbar{ --topbar-h:44px; background:var(--color-primary); color:#fff; } .topbar__inner{ display:flex; gap:1.25rem; align-items:center; justify-content:flex-end; min-height:var(--topbar-h); } .topbar__item{ display:inline-flex; align-items:center; gap:.5rem; color:#fff; opacity:.95; text-decoration:none; white-space:nowrap; } .topbar__item:hover{ opacity:1; text-decoration:underline; } /* ===== Navbar ===== */ .navbar{ --navbar-h:92px; --brand-bg:#f5f7f9; position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--color-border); } .navbar__inner{ min-height:var(--navbar-h); padding-block:0; display:grid; grid-template-columns:auto auto 1fr auto; gap:1.25rem; align-items:center; } .brandwrap{ align-self:stretch; height:var(--navbar-h); display:flex; align-items:center; background:var(--brand-bg); padding-inline:14px; border-radius:14px; } .brand img{ height:clamp(60px,6.2vw,76px); width:auto; display:block; } .socialbar{ display:flex; align-items:center; gap:1rem; padding-inline:.9rem 1.1rem; border-right:1px solid var(--color-border); } .social__link{ color:#6b7280; display:inline-flex; padding:.25rem; } .social__link:hover{ color:var(--color-primary); } .menu{ display:flex; gap:2.25rem; align-items:center; justify-content:center; } .menu__link{ color:#6b7280; font:600 1rem/1 var(--font-headings); letter-spacing:.2px; text-decoration:none; } .menu__link:hover, .menu__link[aria-current="page"]{ color:#111; } .navbar__cta{ white-space:nowrap; border-radius:14px; padding:.9rem 1.3rem; } .navbar__inner>*{ min-width:0; } /* Hamburguesa y off-canvas */ .nav-toggle{ display:none; width:42px; height:42px; border:1px solid var(--color-border); border-radius:10px; background:#fff; padding:8px; gap:4px; align-items:center; justify-content:center; } .nav-toggle__bar{ display:block; width:100%; height:2px; background:#111; border-radius:2px; } .nav-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:59; } @media (max-width:992px){ .nav-toggle{ display:inline-flex; } .navbar__inner{ grid-template-columns:auto auto 1fr auto; gap:.5rem; } .socialbar{ display:none; } .navbar__cta{ display:none; } .menu{ position:fixed; z-index:60; left:0; right:0; top: calc(var(--navbar-h) + var(--topbar-h,44px)); background:#fff; border-top:1px solid var(--color-border); display:flex; flex-direction:column; gap:.25rem; padding:.75rem .75rem 1rem; max-height: calc(100vh - var(--navbar-h) - var(--topbar-h,44px)); overflow:auto; transform:translateY(-12px); opacity:0; pointer-events:none; transition:transform var(--dur-2) var(--easing), opacity var(--dur-2) var(--easing); } .menu__link{ padding:.85rem; border-radius:10px; font-size:1.05rem; color:#111; } .menu__link:hover{ background:#f5f7f9; } .nav-open .menu{ transform:translateY(0); opacity:1; pointer-events:auto; } .nav-open .nav-scrim{ display:block; } .nav-scrim[hidden]{ display:none !important; } } /* ===== Hero ===== */ .hero{ position:relative; isolation:isolate; overflow:clip; background:#dae9ed; --ceo-w:clamp(420px,40vw,760px); --ceo-x:58%; --ceo-y:56%; } .hero__bg{ position:absolute; inset:0; z-index:0; } .hero__pattern{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; opacity:.74; } .hero__gradient{ position:absolute; inset:0; background: radial-gradient(1200px 650px at 10% 15%, rgba(62,157,216,.18), transparent 60%), radial-gradient(800px 500px at 85% 75%, rgba(51,168,54,.12), transparent 65%); } .hero__stage{ position:relative; z-index:1; min-height:clamp(640px,78vh,860px); padding-block:clamp(2.5rem,5vw,4rem); } .hero__title{ position:relative; z-index:1; margin:clamp(1rem,4vw,2rem) 0 0; font-family:var(--font-headings); font-weight:700; font-size:clamp(3.2rem,9vw,7.2rem); line-height:.92; letter-spacing:-.02em; color:#0e1b1f; } .hero__title .dash{ opacity:.6; } .hero__title-line{ display:inline-block; transition:opacity .38s var(--easing), transform .38s var(--easing); } .hero__title-line.fade-out{ opacity:0; transform:translateY(8px); } .hero__title-line.fade-in{ opacity:1; transform:translateY(0); } .hero__figure{ position:absolute; left:var(--ceo-x); top:var(--ceo-y); transform:translate(-50%,-50%); z-index:3; pointer-events:none; } .hero__figure img{ width:var(--ceo-w); height:auto; } .hero__left{ position:absolute; z-index:2; left:min(6vw,64px); bottom:min(10vh,120px); max-width:44ch; } .hero__avatars{ display:flex; align-items:center; gap:.35rem; margin-bottom:.75rem; } .hero__avatars img{ width:44px; height:44px; border-radius:50%; border:3px solid #fff; box-shadow:var(--shadow-sm); } .hero__avatar-more{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--color-primary); color:#fff; font-weight:700; box-shadow:var(--shadow-sm); } .hero__blurb{ color:#1b2b30; } .hero__year{ position:absolute; z-index:2; right:min(8vw,96px); top:min(14vh,120px); font-weight:700; color:#2a3a3f; opacity:.65; display:inline-flex; align-items:center; gap:.6rem; } .hero__year::after{ content:""; width:clamp(80px,12vw,160px); height:8px; background:#7a8487; opacity:.45; border-radius:8px; } .hero__ctaCircle{ position:absolute; z-index:2; right:min(8vw,96px); bottom:min(10vh,120px); width:clamp(140px,13vw,200px); height:clamp(140px,13vw,200px); border-radius:50%; background:#0f1d22; color:#fff; display:grid; place-content:center; text-align:center; gap:.15rem; font-weight:700; box-shadow:var(--shadow-md); transition:transform var(--dur-2) var(--easing), box-shadow var(--dur-2) var(--easing); } .hero__ctaCircle:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); text-decoration:none; } .hero__dot{ position:absolute; z-index:1; right:min(18vw,240px); bottom:min(10vh,120px); width:clamp(160px,18vw,280px); height:clamp(160px,18vw,280px); border-radius:50%; background:#0f1d22; box-shadow:0 24px 48px rgba(0,0,0,.22); opacity:.95; } /* Hero responsive */ @media (max-width:992px){ .hero{ --ceo-w:clamp(320px,70vw,560px); --ceo-x:50%; --ceo-y:62%; } .hero__title{ font-size:clamp(2.4rem,9vw,3.4rem); margin-top:1.25rem; } .hero__left{ left:16px; right:16px; bottom:96px; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); padding:12px 14px; border-radius:12px; } .hero__avatars img{ width:40px; height:40px; } .hero__avatar-more{ width:42px; height:42px; } .hero__year{ right:16px; top:16px; } .hero__ctaCircle{ right:16px; bottom:16px; width:140px; height:140px; } .hero__dot{ right:22vw; bottom:8vh; width:180px; height:180px; } } @media (max-width:576px){ .hero{ --ceo-w:clamp(260px,72vw,440px); --ceo-y:64%; } .hero__title{ font-size:clamp(2rem,10vw,2.8rem); } .hero__left{ bottom:84px; } .hero__ctaCircle{ width:132px; height:132px; } .hero__year::after{ height:6px; } } /* ========================= HERO — Fixes Mobile/Tablet ========================= */ @media (max-width: 992px){ .hero__pattern{ object-position: left center; } .hero__figure{ left: auto; top: auto; right: -20px; bottom: 26vh; transform: none; z-index: 3; } .hero__figure img{ width: min(42vw, 360px); height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.25)); } .hero__left{ left: 16px; right: calc(16px + 44vw); bottom: 104px; max-width: none; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); padding: 12px 14px; border-radius: 12px; z-index: 2; } .hero__year{ right: 16px; top: 16px; } .hero__ctaCircle{ right: 16px; bottom: 16px; width: 140px; height: 140px; } .hero__dot{ right: 8px; bottom: calc(22vh - 20px); width: 180px; height: 180px; opacity: .85; z-index: 1; } .hero__title{ font-size: clamp(2.4rem, 9vw, 3.4rem); margin-top: 1.25rem; } .hero__avatars img{ width: 40px; height: 40px; } .hero__avatar-more{ width: 42px; height: 42px; } } @media (max-width: 420px){ .hero__figure img{ width: min(48vw, 280px); } .hero__left{ right: 16px; bottom: 92px; } .hero__dot{ display: none; } .hero__ctaCircle{ width: 132px; height: 132px; } .hero__year::after{ height: 6px; } } @media (max-width: 992px){ .hero{ --ceo-w: clamp(380px, 64vw, 600px); --ceo-y: 60%; } .hero__left{ right: calc(16px + 56vw); } } @media (max-width: 576px){ .hero{ --ceo-w: clamp(320px, 82vw, 560px); --ceo-y: 62%; } .hero__left{ right: 16px; } .hero__ctaCircle{ right: 12px; bottom: 12px; } .hero__dot{ right: 0; bottom: 20vh; width: min(46vw, 220px); height: min(46vw, 220px); } } /* ====================== CONÓCENOS (referencia) ====================== */ .about-ref{ background:#eef4f5; } /* Grid base (móvil primero) */ .about-ref__grid{ position:relative; display:grid; grid-template-columns: 1fr; grid-template-areas: "kicker" "title" "rule" "media" "lower"; row-gap: 1rem; } /* Kicker */ .about-ref__kicker{ grid-area:kicker; display:inline-flex; gap:.5rem; align-items:center; font:700 .9rem/1 var(--font-headings); color:#176f6b; letter-spacing:.06em; margin-top:.25rem; } /* Título corto (~26ch) */ .about-ref__title{ grid-area:title; margin:.6rem 0 1.1rem; max-width:26ch; color:#0f1d22; font-family:var(--font-headings); font-weight:700; font-size:clamp(1.9rem, 8.2vw, 2.4rem); line-height:1.06; letter-spacing:-.01em; } .about-ref__title .hl{ color:#0e3a44; background:linear-gradient(90deg, rgba(14,58,68,.10), rgba(14,58,68,0)); padding:0 .1em; border-radius:.2em; } /* Regla */ .about-ref__rule{ grid-area:rule; border:0; border-top:1px dashed rgba(0,0,0,.14); margin:0 0 1.5rem; } /* Fila inferior (móvil: una columna) */ .about-ref__lower{ grid-area:lower; display:grid; gap:1rem; align-items:start; grid-template-columns: 1fr; } /* Métrica */ .about-ref__stat{ display:grid; gap:.5rem; } .about-ref__num{ font-family:var(--font-headings); font-weight:800; font-size:clamp(2.6rem, 16vw, 4.6rem); line-height:.9; color:#0f1d22; } .about-ref__num span{ margin-left:.08em; opacity:.9; font-weight:700; } .about-ref__label{ color:#334247; font-weight:600; margin:0; } /* Copy + CTA */ .about-ref__copy{ border-left:0; padding-left:0; } .about-ref__copy p{ margin:0 0 .95rem; color:#2a3a3f; } .about-ref__cta{ --cta-bg:#176f6b; display:inline-flex; align-items:center; gap:.6rem; background:var(--cta-bg); color:#fff; text-decoration:none; border-radius:999px; padding:.85rem 1.15rem; font-weight:700; box-shadow:var(--shadow-sm); transition:transform var(--dur-2) var(--easing), box-shadow var(--dur-2) var(--easing); } .about-ref__cta:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); } .about-ref__ctaDot{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:999px; background:#0f1d22; } .about-ref__media{ grid-area:media; justify-self:center; width:min(78vw, 420px); aspect-ratio:1/1; border-radius:999px; overflow:hidden; box-shadow:var(--shadow-md); margin:.5rem auto 1rem; } .about-ref__media img{ width:100%; height:100%; object-fit:cover; } /* ===== Desktop (≥1100px) ===== */ @media (min-width:1100px){ .about-ref__grid{ grid-template-columns: clamp(280px, 26vw, 420px) 1fr; column-gap: clamp(24px, 4vw, 56px); grid-template-areas: "kicker title" "media title" "media rule" "media lower"; } .about-ref__rule{ margin:0 0 1.5rem; } .about-ref__lower{ grid-template-columns: minmax(220px,.9fr) minmax(320px,1.1fr); gap:clamp(16px, 3vw, 40px); } /* Copy con divisor */ .about-ref__copy{ border-left:1px dashed rgba(0,0,0,.14); padding-left:clamp(14px, 2vw, 22px); } .about-ref__title, .about-ref__rule, .about-ref__lower{ position:relative; z-index:1; } .about-ref__media{ justify-self:start; align-self:end; width:100%; max-width:420px; margin:0; box-shadow:var(--shadow-md); z-index:0; transform:translateX(-4%); } } /* === PARALLAX fix: bleed + transform (iOS friendly) === */ .parx{ position:relative; color:#fff; overflow:hidden; } .parx__bg{ position:absolute; /* sangrado vertical para que al mover el fondo nunca deje huecos */ inset:-15vh 0; /* <- sangrado arriba/abajo */ background-size:cover; background-position:center right; will-change:transform; transform:translate3d(0,0,0) scale(1.06); /* leve escala para cubrir al mover */ } /* overlay de legibilidad */ .parx::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 72%); } .parx__inner{ position:relative; z-index:1; min-height:clamp(460px, 68vh, 760px); display:flex; align-items:center; padding-block: var(--space-7); } .parx__lead{ margin:0; max-width:65%; font-weight:700; font-size:clamp(1.4rem, 2.8vw, 2.4rem); line-height:1.15; letter-spacing:-.01em; } .parx__lead strong{ color:#cfe8f7; font-weight:800; } /* NO usar fixed cuando hay transform, evita glitches */ @media (min-width:992px){ .parx__bg{ background-attachment:scroll; } } @media (max-width:768px){ .parx__lead{ max-width:100%; font-size:clamp(1.2rem, 4.5vw, 1.6rem); } .parx::before{ background:linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.48) 60%, rgba(0,0,0,.1) 100%); } } @media (prefers-reduced-motion:reduce){ .parx__bg{ transform:none !important; } } /* ===== PRODUCTO (superpuesto al parallax) ===== */ .product{ position: relative; z-index: 2; /* por encima del parallax */ margin-top: calc(-1 * min(14vh, 140px)); /* se “come” la imagen anterior */ padding-block: clamp(2rem, 5vw, 3rem); background: #eef4f5; border-radius: 20px 20px 0 0; box-shadow: 0 -14px 40px rgba(0,0,0,.12); } .product__wrap{ display: grid; grid-template-columns: 1.05fr 1fr; /* izq render / der texto */ gap: clamp(1.2rem, 3vw, 2.2rem); align-items: center; } /* Render */ .product__media{ margin:0; padding:0; border-radius: 16px; overflow:hidden; background: #fff; box-shadow: var(--shadow-md); } .product__media img{ width:100%; height:auto; display:block; } /* Texto */ .product__content{ padding-inline: clamp(.25rem, 1vw, .5rem); } .product__kicker{ color:#176f6b; font-weight:700; letter-spacing:.06em; font-size:.9rem; margin:0 0 .35rem; } .product__title{ margin:.1rem 0 1rem; font-family:var(--font-headings); color:#0f1d22; font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height:1.15; } .product__features{ list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:1rem; } .feature{ display:grid; grid-template-columns: 56px 1fr; gap:.9rem; align-items:start; padding:1rem 0; border-top:1px dashed rgba(0,0,0,.12); } .feature:first-child{ border-top:0; } .feature__icon{ display:grid; place-items:center; width:56px; height:56px; border-radius:999px; background: rgba(23,111,107,.12); color:#176f6b; } .feature__icon svg{ width:28px; height:28px; } .feature__body h3{ margin:.1rem 0 .35rem; font:700 1.05rem/1.2 var(--font-headings); color:#0f1d22; } .feature__body p{ margin:0; color:#334247; } /* CTA */ .product__ctas{ display:flex; gap:.75rem; flex-wrap:wrap; } /* Responsive */ @media (max-width: 992px){ .product{ margin-top: calc(-1 * min(8vh, 80px)); } .product__wrap{ grid-template-columns: 1fr; } .product__media{ order: -1; } /* imagen arriba */ } @media (max-width: 576px){ .product{ margin-top: 0; border-radius: 0; } .feature{ grid-template-columns: 48px 1fr; } .feature__icon{ width:48px; height:48px; } } /* ===== Parallax: capa y sangrado correctos ===== */ .parx{ position: relative; z-index: 1; /* el parallax queda “debajo” del producto */ overflow: hidden; /* solo recorta a sus hijos, no al siguiente */ isolation: isolate; /* aísla su stacking context */ } .parx__bg{ position: absolute; inset: -18vh 0; /* sangrado arriba/abajo para que al moverse no deje huecos */ background-size: cover; background-position: center right; transform: translate3d(0,0,0) scale(1.06); /* leve escala para cubrir el bleed */ will-change: transform; z-index: -1; /* fondo siempre detrás del overlay de la sección */ } .parx::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 72%); z-index: 0; } /* ===== Producto: superpuesto y con solape visible ===== */ :root{ --overlap: clamp(90px, 14vh, 220px); /* cuánto se “mete” el producto sobre el parallax */ } .product{ position: relative; z-index: 5; /* por encima del parallax y su overlay */ margin-top: calc(var(--overlap) * -1); background: #eef4f5; border-radius: 20px 20px 0 0; box-shadow: 0 -16px 48px rgba(0,0,0,.18); } /* transiciones suaves (opcional) */ .product{ transition: margin-top .3s ease; } /* en móvil no solapamos (para no cortar contenido) */ @media (max-width: 576px){ .product{ margin-top: 0; border-radius: 0; box-shadow: none; } } .feature__icon svg{ width:28px; height:28px; display:block; } .feature__icon svg path{ stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* Sección */ .stats{ background:#eef4f5; padding-block:clamp(2.2rem,6vw,3.2rem); } .stats__head{ text-align:center; margin-bottom:clamp(1.2rem,4vw,2rem); } .stats__kicker{ color:#176f6b; font-weight:700; letter-spacing:.08em; font-size:.9rem; } .stats__title{ margin:.45rem 0 0; color:#0f1d22; font-family:var(--font-headings); font-weight:800; font-size:clamp(1.8rem,3.3vw,2.6rem); line-height:1.1; } /* Grid principal */ .stats__grid{ display:grid; gap:clamp(1.2rem,3vw,2rem); grid-template-columns: 1.05fr 1fr; align-items:start; } .stats__left{ position:relative; isolation:isolate; } /* Foto como background (fallback si no carga la ruta) */ .stats__photo{ aspect-ratio:16/10; border-radius:16px; background:#e9eff2 center/cover no-repeat; background-image:var(--photo); box-shadow:var(--shadow-md); } /* Tarjeta verde con video a todo el ancho */ .stats__card{ position:absolute; left:clamp(18px,2vw,24px); bottom:clamp(18px,2vw,24px); width:min(360px, 86%); background:#176f6b; color:#fff; border-radius:16px; box-shadow:var(--shadow-md); padding:14px; } .stats__card--flush{ padding:0 14px 14px; } .stats__card--flush .stats__video{ margin:0 -14px 12px; border-radius:16px 16px 12px 12px; overflow:hidden; } .stats__video{ aspect-ratio:16/9; background:#0f1d22; } .stats__video video{ width:100%; height:100%; display:block; object-fit:cover; } .stats__cardTitle{ margin:.4rem 0 .15rem; font:700 1rem/1.2 var(--font-headings); } .stats__cardText{ margin:0; opacity:.95; } /* Métricas */ .stats__right{ display:grid; gap:clamp(12px,2vw,16px); } .metric{ background:#fff; border:1px solid var(--color-border); border-radius:16px; box-shadow:var(--shadow-sm); padding: clamp(14px,2vw,18px); display:grid; grid-template-columns:auto 1fr; gap:clamp(12px,2vw,16px); align-items:center; } .metric__num{ font-family:var(--font-headings); font-weight:800; color:#0f1d22; font-size: clamp(2.2rem,5vw,3rem); line-height:1; padding-right:clamp(12px,2vw,16px); border-right:1px dashed rgba(0,0,0,.15); } .metric__num span{ font-weight:700; opacity:.9; margin-left:2px; } .metric__body h4{ margin:0 0 .25rem; font:700 1.05rem/1.2 var(--font-headings); color:#0f1d22; } .metric__body p{ margin:0; color:#334247; } /* Responsive */ @media (max-width:1024px){ .stats__grid{ grid-template-columns:1fr; } .stats__card{ position:relative; left:auto; bottom:auto; width:100%; margin-top:12px; } } @media (max-width:576px){ .metric{ grid-template-columns:1fr; } .metric__num{ border-right:0; padding-right:0; margin-bottom:.25rem; } } /* La tarjeta reemplaza a la foto: ocupa toda la columna izquierda */ .stats__left{ position:relative; isolation:isolate; } /* estado por defecto de la tarjeta (antes era absolute) */ .stats__card--full{ position: relative !important; left: auto !important; bottom: auto !important; width: 100% !important; margin: 0; /* sin separación extra */ padding: 16px; /* puedes ajustar */ border-radius: 16px; } /* video a borde-borde dentro de la tarjeta */ .stats__card--full.stats__card--flush .stats__video{ margin: 0 -16px 12px; /* sangrado lateral */ border-radius: 16px 16px 12px 12px; /* esquinas superiores del video */ overflow: hidden; } .stats__video{ aspect-ratio:16/9; background:#0f1d22; } .stats__video video{ width:100%; height:100%; display:block; object-fit:cover; } /* Si dejaste la foto en el HTML y quieres ocultarla */ @media (min-width: 1025px){ .stats__photo{ display:none; } } /* ===== Parallax genérico (reutilizable) ===== */ .pax{ position: relative; color: #fff; background: center / cover no-repeat var(--img, none); } .pax--fixed{ background-attachment: fixed; } /* fallback sin JS */ .pax::before{ content:""; position:absolute; inset:0; /* overlay para legibilidad del copy */ background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.22) 35%, rgba(0,0,0,.55)); } .pax__inner{ position: relative; z-index: 1; min-height: clamp(420px, 76vh, 760px); display: flex; align-items: flex-end; padding-block: clamp(48px, 10vh, 96px); } .pax__tag{ display:inline-flex; gap:.5rem; align-items:center; padding:.4rem .75rem; background: rgba(15,29,34,.55); border:1px solid rgba(255,255,255,.22); backdrop-filter: blur(4px); border-radius:999px; font-weight:700; letter-spacing:.08em; font-size:.85rem; margin-bottom:.8rem; } .pax__copy{ width:min(65ch, 65%); font-family: var(--font-headings); font-weight:800; letter-spacing:-.01em; line-height:1.08; font-size: clamp(1.6rem, 4.2vw, 2.6rem); text-shadow: 0 10px 34px rgba(0,0,0,.45); } @media (max-width: 768px){ .pax__copy{ width:100%; font-size: clamp(1.4rem, 6.2vw, 2rem); } } .section--amplia{ padding-block: clamp(var(--space-7), 9vw, calc(var(--space-8) + var(--space-6))); } .stats__card--full.stats__card--flush .stats__video { margin: 0 -16px -7px; border-radius: 16px 16px 12px 12px; overflow: hidden; top: -16px; position: relative; } .impact-ref{ background:#eef4f5; } .impact-ref__head{ display:grid; grid-template-columns:1fr auto; gap:clamp(12px,3vw,28px); align-items:start; margin-bottom:clamp(18px,4vw,28px); } .impact-ref__kicker{ display:inline-flex; align-items:center; gap:.5rem; padding:.38rem .7rem; border:1px solid rgba(0,0,0,.08); border-radius:999px; background:#fff; color:#176f6b; font-weight:700; letter-spacing:.08em; } .impact-ref__title{ margin:.6rem 0 0; color:#0f1d22; line-height:1.05; font-family:var(--font-headings); font-weight:800; letter-spacing:-.01em; font-size: clamp(1.9rem, 4.3vw, 3rem); } .impact-ref__hl{ color:var(--color-primary); } .btn-pill{ display:inline-flex; align-items:center; gap:.75rem; background: var(--color-primary); color:#fff; text-decoration:none; padding:.9rem 1.25rem; border-radius:999px; font-weight:700; box-shadow:var(--shadow-sm); transition: transform var(--dur-2) var(--easing), box-shadow var(--dur-2) var(--easing); } .btn-pill:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); } .btn-pill__dot{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:999px; background:#0f1d22; } .btn-pill__dot i{ font-size:.95rem; } /* Impacto – look & feel alineado con tu paleta */ .impact-card{ background:#fff; border:1px solid var(--color-border); border-radius:18px; box-shadow:var(--shadow-sm); padding:clamp(18px,2.6vw,26px); transition: box-shadow var(--dur-2) var(--easing), transform var(--dur-2) var(--easing); } .impact-card:hover{ box-shadow:var(--shadow-md); transform: translateY(-2px); } /* Íconos Font Awesome con color de marca */ .impact-card__icon i{ font-size: 2.9rem; line-height: 1; color: var(--color-primary); /* #3e9dd8 */ display: inline-block; filter: drop-shadow(0 2px 6px rgba(62,157,216,.15)); } /* Tipos/colores consistentes */ .impact-card__title{ margin: .6rem 0 .35rem; color: var(--color-ink); font: 700 1.25rem/1.2 var(--font-headings); } .impact-card__text{ margin:0 0 .6rem; color: var(--color-text); } /* Chips ODS con primario suavizado */ .impact-card__tags{ margin:0; font-weight:700; color: var(--color-primary); display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border-radius:999px; background: color-mix(in srgb, var(--color-primary) 14%, #fff); border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent); } /* Grid tal como lo tenías (3 → 2 → 1) */ .impact-ref__cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:clamp(14px,2.6vw,20px); } @media (max-width:1024px){ .impact-ref__cards{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .impact-ref__cards{ grid-template-columns:1fr; } } .support__bar{ display:grid; grid-template-columns: minmax(260px, 420px) minmax(0,1fr); align-items:center; column-gap: clamp(16px, 3vw, 48px); row-gap: 20px; } .support__title{ margin:0; font-weight:700; font-size: clamp(22px, 2.4vw, 36px); line-height:1.2; } .support__logos{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(16px, 2vw, 40px); align-items:center; justify-items:center; } .support__logo{ width:100%; height: clamp(90px, 10vw, 140px); display:flex; align-items:center; justify-content:center; padding: clamp(6px, 0.9vw, 14px); } .support__logo img{ width:100%; height:100%; object-fit: contain; display:block; } @media (max-width: 991.98px){ .support__bar{ grid-template-columns: 1fr; text-align:center; } .support__logos{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 480px){ .support__logos{ grid-template-columns: 1fr; } .support__logo{ height: clamp(80px, 24vw, 110px); } } /* Contacto con fondo de imagen y panel a la derecha */ .contact-cta--bg{ background-image:url("../img/pescador-final.jpg") !important; position: relative; padding-block: clamp(2.5rem, 12vh, 6rem); } .contact-cta--bg::before{ content:""; position:absolute; inset:0; pointer-events:none; } .contact-cta--bg .container{ position:relative; z-index:900; } /* Panel alineado a la derecha */ .contact-cta__panel{ margin-left: auto; width: min(100%, 560px); background:#fff; border:1px solid var(--color-border, #e7e7e7); border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: clamp(18px, 3.2vw, 28px); display:flex; flex-direction:column; gap:.75rem; } .contact-cta__title{ margin:0; color:#0f1d22; font-family: var(--font-headings, "Montserrat", system-ui, sans-serif); font-weight:800; letter-spacing:-.01em; font-size: clamp(1.6rem, 3.2vw, 2.2rem); } .contact-cta__lead{ margin:0 0 .5rem; color: var(--color-text, #575757); } /* Form */ .contact-form{ margin-top:.25rem; } .form-grid{ display:grid; gap: clamp(12px, 2vw, 16px); grid-template-columns: 1fr 1fr; } .form-control{ display:flex; flex-direction:column; gap:.4rem; } .form-control--full{ grid-column:1 / -1; } .form-control label{ font-weight:700; color:#0f1d22; font-family: var(--font-body, "Source Sans Pro", system-ui, sans-serif); } .form-control input, .form-control textarea{ width:100%; padding:.78rem .95rem; border-radius:12px; border:1px solid var(--color-border, #e7e7e7); background:#fff; color:var(--color-ink, #111); font:400 1rem/1.25 var(--font-body, "Source Sans Pro", system-ui, sans-serif); transition: box-shadow .25s ease, border-color .25s ease; } .form-control input:focus, .form-control textarea:focus{ outline:none; border-color:#3e9dd8; box-shadow: 0 0 0 3px rgba(62,157,216,.25); } .form-actions{ display:flex; align-items:center; gap:1rem; margin-top:.25rem; } .btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.2rem; border-radius:14px; border:1px solid transparent; font-weight:700; text-decoration:none; transition: transform .25s ease, box-shadow .25s ease; } .btn-dark{ background:#0f1d22; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.16); } .btn-dark:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.18); } .consent{ color: var(--color-text, #575757); opacity:.95; } .u-hidden{ position:absolute !important; left:-9999px !important; } /* Responsive */ @media (max-width: 992px){ .contact-cta__panel{ width:100%; } } @media (max-width: 576px){ .form-grid{ grid-template-columns: 1fr; } } .contact-cta--bg{ background-position:center; background-size:cover; background-repeat:no-repeat; position:relative; padding-block: clamp(2.5rem, 12vh, 6rem); } .contact-cta--bg::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35)); pointer-events:none; } .contact-cta--bg .container{ position:relative; z-index:1; } .form-grid{ display:grid; gap:clamp(12px, 2vw, 16px); grid-template-columns:1fr 1fr; } .form-control--full{ grid-column:1 / -1; } .contact-cta--bg{ background-image: url(assets/img/pescador-final.jpg); background-position:center; background-size:cover; background-repeat:no-repeat; position:relative; padding-block: clamp(2.5rem, 12vh, 6rem); } /* Footer */ .site-footer{ background:#0f1d22; color:#cfd8dc; border-top:1px solid rgba(255,255,255,.08); } .footer__inner{ display:flex; align-items:center; justify-content:center; padding:clamp(16px,2.6vw,22px) 0; } .footer__legal{ margin:0; font-size:.95rem; text-align:center; } .footer__legal .sep{ opacity:.5; margin:0 .5rem; } .footer__legal .credit{ color:#fff; font-weight:700; } .footer__legal a{ color:#cfe8f7; text-decoration:none; } .footer__legal a:hover{ text-decoration:underline; } .parx { position: relative; color:#fff; overflow:hidden; isolation:isolate; } .parx__bg{ position:absolute; inset:-15vh 0; background-size:cover; background-position:center right; } .parx::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 72%); } .hero__icons{ display:flex; align-items:center; gap:.35rem; margin-bottom:.75rem; } .hero__icon{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); border:3px solid #fff; color: var(--color-primary); } .hero__icon i{ font-size:1.15rem; line-height:1; } @media (max-width:992px){ .hero__icon{ width:40px; height:40px; } .hero__icon i{ font-size:1rem; } } @media (max-width:420px){ .hero__icon{ width:38px; height:38px; } }