/* ======================= VARIABLES / BASE ======================= */ :root{ --primary:#39E079; --bg-light:#f6f8f7; --bg-dark:#122017; --text:#111418; --muted:#4c669a; --muted-dark:#939db8; --border:#e7ebf3; --border-dark:#29303d; --white:#ffffff; --panel:#1f2634; --radius:12px; --radius-lg:16px; --shadow:0 18px 50px rgba(0,0,0,.12); --container:1200px; --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:var(--font); background:var(--bg-light); color:var(--text); overflow-x:hidden; } /* Dark mode (si quieres activarlo: ) */ body.dark{ background:var(--bg-dark); color:var(--white); } /* ======================= UTILIDADES ======================= */ .container{ max-width:var(--container); margin:0 auto; padding:0 24px; } .section{padding:80px 0} .section--alt{background:var(--white)} body.dark .section--alt{background:#1a202c} .icon{font-size:22px; line-height:1} .icon--green{color:#16a34a} /* ======================= BOTONES ======================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:40px; padding:0 16px; border-radius:10px; font-weight:800; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:filter .2s ease, background .2s ease, border-color .2s ease; } /* Animación base */ .btn{ transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; will-change: transform; } /* Al pasar el mouse */ .btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.18); } /* Al hacer click */ .btn:active{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0,0,0,.14); } /* Foco con teclado (accesible) */ .btn:focus-visible{ outline: 3px solid rgba(57,224,121,.35); outline-offset: 3px; } .btn--lg{height:48px; padding:0 22px; font-size:16px} .btn--xl{height:56px; padding:0 26px; font-size:18px} .btn--primary{ background:var(--primary); color:var(--white); } .btn--primary:hover{filter:brightness(.95)} .btn--ghost{ background:var(--white); border-color:var(--border); color:var(--text); } body.dark .btn--ghost{ background:#1f2634; border-color:var(--border-dark); color:var(--white); } .btn--ghost:hover{filter:brightness(.98)} .btn--light{ background:var(--white); color:var(--primary); } .btn--outline-light{ background:transparent; border-color:rgba(255,255,255,.9); color:var(--white); } .btn--outline-light:hover{background:rgba(255,255,255,.08)} /* ======================= HEADER / NAV ======================= */ .header{ position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border); background:var(--bg-light); } body.dark .header{ background:var(--bg-dark); border-bottom:1px solid var(--border-dark); } .header__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0; } .brand{ display:flex; align-items:center; gap:12px; } .brand__icon{ width:32px; height:32px; color:var(--primary); } .brand__svg{width:100%; height:100%} .brand__name{ margin:0; font-size:18px; font-weight:900; letter-spacing:-0.02em; } .nav{ display:none; gap:24px; margin-left:auto; margin-right:16px; } .nav__link{ font-size:14px; font-weight:600; color:#0d121b; text-decoration:none; transition:color .2s ease; } .nav__link:hover{color:var(--primary)} body.dark .nav__link{color:var(--muted-dark)} @media (min-width: 768px){ .nav{display:flex} } /* ======================= HERO ======================= */ .section--hero{padding:40px 0} .hero{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; padding-top:24px; padding-bottom:24px; } @media (min-width: 900px){ .hero{grid-template-columns:1fr 1fr} } .hero__title{ margin:0; font-size:42px; font-weight:900; line-height:1.05; letter-spacing:-0.03em; color:#0d121b; } body.dark .hero__title{color:var(--white)} @media (min-width: 1024px){ .hero__title{font-size:56px} } .hero__subtitle{ margin:10px 0 0; max-width:600px; color:var(--muted); font-size:18px; line-height:1.55; } body.dark .hero__subtitle{color:var(--muted-dark)} .hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; } .hero__media{ width:100%; aspect-ratio:4/3; border-radius:var(--radius-lg); box-shadow:var(--shadow); background: url("img/zona_carga.png") center/cover no-repeat; /* ...lo que ya tienes... */ transition: opacity .25s ease; } .hero__media.is-fading{ opacity: .15; } .hero__media{ transition: transform .6s ease; overflow: hidden; } .hero__media:hover{ transform: scale(1.04); } /* ======================= STATS ======================= */ .section--stats{ background:var(--white); padding:32px 0; } body.dark .section--stats{background:#1a202c} .stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } @media (min-width: 768px){ .stats{grid-template-columns:repeat(4,1fr)} } .stat{ text-align:center; padding:10px 12px; } .stat__value{ margin:0; font-size:30px; font-weight:900; color:#0d121b; } body.dark .stat__value{color:var(--white)} .stat__value--primary{color:var(--primary)} .stat__label{ margin:6px 0 0; font-size:13px; font-weight:600; color:var(--muted); } body.dark .stat__label{color:var(--muted-dark)} /* ======================= SECCIONES (HEAD) ======================= */ .section-head{ text-align:center; margin-bottom:42px; } .section-head--left{text-align:left} .kicker{ display:inline-block; color:var(--primary); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; } .section-title{ margin:10px 0 0; font-size:34px; font-weight:900; letter-spacing:-0.02em; color:#0d121b; } body.dark .section-title{color:var(--white)} .section-subtitle{ margin:10px auto 0; max-width:720px; color:var(--muted); font-size:18px; line-height:1.55; } body.dark .section-subtitle{color:var(--muted-dark)} /* ======================= GRIDS / CARDS ======================= */ .grid{display:grid; gap:18px} .grid--2{grid-template-columns:1fr} .grid--4{grid-template-columns:1fr} .grid--gap-lg{gap:34px} @media (min-width: 768px){ .grid--2{grid-template-columns:1fr 1fr} .grid--4{grid-template-columns:repeat(2,1fr)} } @media (min-width: 1024px){ .grid--4{grid-template-columns:repeat(4,1fr)} } .card{ border:1px solid var(--border); background:var(--white); border-radius:var(--radius-lg); padding:22px; box-shadow:0 4px 14px rgba(0,0,0,.04); transition:transform .2s ease, box-shadow .2s ease; } /* Estado inicial (antes de verse) */ .reveal-card{ opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease; } /* Estado visible */ .reveal-card.is-visible{ opacity: 1; transform: translateY(0); } /* Mantén hover solo en equipos con mouse real */ @media (hover: hover) and (pointer: fine) { .card:hover{ transform: translateY(-2px); /* si ya lo tienes, puedes omitir */ } } /* Accesibilidad */ @media (prefers-reduced-motion: reduce) { .reveal-card{ opacity: 1; transform: none; transition: none; } } .card:hover{box-shadow:0 10px 22px rgba(0,0,0,.08)} body.dark .card{ background:#1f2634; border-color:var(--border-dark); } .card__icon{ width:48px; height:48px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:rgba(57,224,121,.12); color:var(--primary); margin-bottom:16px; } .card__icon .material-symbols-outlined{font-size:30px} .card__title{ margin:0 0 10px; font-size:20px; font-weight:800; } .card__body{font-size:14px; line-height:1.55} .card__strong{margin:0; font-weight:800} .card__muted{margin:2px 0 0; color:var(--muted)} body.dark .card__muted{color:var(--muted-dark)} .card__divider{ border:none; border-top:1px solid rgba(0,0,0,.06); margin:14px 0; } body.dark .card__divider{border-top:1px solid rgba(255,255,255,.10)} .card__small{ margin:0; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(0,0,0,.4); font-weight:700; } body.dark .card__small{color:rgba(255,255,255,.45)} .card__line{margin:2px 0 10px; font-weight:700} /* ======================= FACILITIES (IMÁGENES + OVERLAY) ======================= */ .facility{ position:relative; border-radius:22px; overflow:hidden; min-height:260px; background:#ddd center/cover no-repeat; } .facility--one{ background-image: url("img/zona_trabajo.png"); } .facility--two{ background-image: url("img/zona_carga.png"); } .facility__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; color:rgba(255,255,255,.92); background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); } .facility__title{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .facility__title h3{ margin:0; color:var(--white); font-size:20px; font-weight:900; } .facility__badge{ background:var(--white); color:var(--primary); border-radius:999px; padding:4px; font-size:18px; } /* ======================= LISTA (Calidad) ======================= */ .list{display:flex; flex-direction:column; gap:14px; margin-top:18px} .list__item{ display:flex; gap:12px; padding:14px; border-radius:12px; border:1px solid var(--border); background:var(--white); } /* Estado inicial (oculto) */ .reveal{ opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; } /* Estado visible */ .reveal.is-visible{ opacity: 1; transform: translateY(0); } /* Accesibilidad: si el usuario prefiere menos movimiento */ @media (prefers-reduced-motion: reduce) { .reveal{ opacity: 1; transform: none; transition: none; } } body.dark .list__item{ background:#1f2634; border-color:var(--border-dark); } .list__icon{color:var(--primary)} .list__title{margin:0; font-size:16px; font-weight:900} .list__text{margin:4px 0 0; color:var(--muted); font-size:13px} body.dark .list__text{color:var(--muted-dark)} /* ======================= PANEL (Tecnología) ======================= */ .panel{ background:var(--white); border:1px solid var(--border); border-radius:22px; padding:26px; } body.dark .panel{ background:#1f2634; border-color:var(--border-dark); } .panel__title{margin:0; font-size:22px; font-weight:900} .panel__text{margin:10px 0 0; color:var(--muted); line-height:1.55} body.dark .panel__text{color:var(--muted-dark)} .toolcard{ margin-top:16px; background:#f3f4f6; border-radius:14px; padding:18px; text-align:center; } body.dark .toolcard{background:#2a3446} .toolcard__brand{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:18px; font-weight:900; } .toolcard__icon{color:var(--primary)} .toolcard__caption{ margin:8px 0 0; font-size:12px; color:rgba(0,0,0,.55); } body.dark .toolcard__caption{color:rgba(255,255,255,.55)} /* ======================= CTA FINAL ======================= */ .cta{ position:relative; background:var(--primary); padding:80px 0; overflow:hidden; } .cta__pattern{ position:absolute; inset:0; opacity:.10; background-image: linear-gradient(to right, rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.6) 1px, transparent 1px); background-size:40px 40px; } .cta__inner{ position:relative; z-index:1; text-align:center; max-width:800px; } .cta__title{ margin:0; color:var(--white); font-size:40px; font-weight:900; letter-spacing:-0.02em; } @media (min-width: 640px){ .cta__title{font-size:52px} } .cta__text{ margin:14px auto 0; max-width:700px; color:rgba(255,255,255,.82); font-size:18px; line-height:1.55; } .cta__actions{ margin-top:22px; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; } @media (min-width: 640px){ .cta__actions{flex-direction:row} } /* ======================= FOOTER ======================= */ .footer{ border-top:1px solid var(--border); background:var(--bg-light); padding:34px 0; } body.dark .footer{ background:#0d121b; border-top:1px solid var(--border-dark); } .footer__inner{ display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:space-between; } @media (min-width: 768px){ .footer__inner{flex-direction:row} } .footer__brand{ display:flex; align-items:center; gap:10px; } .footer__name{color:var(--primary); font-weight:900; font-size:18px} .footer__sep{color:rgba(0,0,0,.35)} body.dark .footer__sep{color:rgba(255,255,255,.35)} .footer__desc{color:rgba(0,0,0,.55); font-size:13px} body.dark .footer__desc{color:rgba(255,255,255,.55)} .footer__copy{color:var(--muted); font-size:13px} body.dark .footer__copy{color:var(--muted-dark)} /* ======================= google maps ======================= */ .map__frame{ margin-top: 14px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,0,0,.10); } body.dark .map__frame{ border-color: rgba(255,255,255,.12); } .map__frame iframe{ display:block; width:100%; height:320px; border:0; } .map__note{ margin: 10px 0 0; font-size: 13px; opacity: .8; line-height: 1.4; } /* ======================= MODAL ======================= */ .modal{ position:fixed; inset:0; display:none; z-index:1000; } .modal.is-open{ display:block; } .modal__overlay{ position:absolute; inset:0; background: rgba(0,0,0,.55); } .modal__dialog{ position:relative; width:min(720px, calc(100% - 32px)); margin: 6vh auto; background: var(--white); border-radius: 18px; border: 1px solid var(--border); overflow:hidden; } body.dark .modal__dialog{ background:#1f2634; border-color: var(--border-dark); } .modal__header{ display:flex; align-items:center; justify-content:space-between; padding: 16px 18px; border-bottom:1px solid rgba(0,0,0,.08); } body.dark .modal__header{ border-bottom:1px solid rgba(255,255,255,.10); } .modal__title{ margin:0; font-size:18px; font-weight:900; } .modal__close{ border:0; background:transparent; color: inherit; font-size:18px; cursor:pointer; } /* ======================= FORM ======================= */ .form{ padding: 18px; } .form__grid{ display:grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 720px){ .form__grid{ grid-template-columns: 1fr 1fr; } } .field{ display:flex; flex-direction:column; gap:6px; } .field--full{ grid-column: 1 / -1; } .field__label{ font-size:12px; font-weight:800; opacity:.8; } .field__input{ width:100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(0,0,0,.14); background: var(--white); color: var(--text); } body.dark .field__input{ background:#0f1624; border-color: rgba(255,255,255,.14); color: var(--white); } .form__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top: 14px; } .form__note{ margin: 10px 0 0; font-size: 12px; opacity: .75; }