/* ========================================================= AMPERKANT — styles.css Índice: 1. Variables / reset 2. Tipografía base 3. Utilidades (container, botones, eyebrow, reveal) 4. Header / navegación 5. Hero 6. Secciones genéricas 7. Categorías (cards-grid--categorias) 8. Quiénes somos 9. Por qué elegirnos (cards-grid--elegirnos) 10. Galería filtrable 11. Sectores 12. FAQ / acordeón 13. Contacto / formulario 14. Footer 15. Páginas legales 16. Responsive ========================================================= */ /* 1. Variables / reset ------------------------------------ */ :root { --color-primario: #0B2E5C; --color-secundario: #1B4B7E; --color-acento: #3C9B45; --color-acento-oscuro: #2E7D34; --color-fondo-gris: #EDEFF3; --color-texto-secundario: #5B6472; --color-texto: #1A1A1A; --color-blanco: #FFFFFF; --font-base: 'Inter', Arial, Helvetica, sans-serif; --container-max: 1200px; --radius: 10px; --radius-sm: 6px; --shadow-sm: 0 2px 8px rgba(11, 46, 92, 0.08); --shadow-md: 0 8px 24px rgba(11, 46, 92, 0.12); --transition: 0.25s ease; --header-h: 100px; } * , *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { margin: 0; font-family: var(--font-base); color: var(--color-texto); background: var(--color-blanco); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ul { list-style: none; margin: 0; padding: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * , *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 2. Tipografía base --------------------------------------- */ h1, h2, h3, h4 { color: var(--color-primario); line-height: 1.2; margin: 0 0 0.5em; font-weight: 800; } h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); } h2 { font-size: clamp(1.6rem, 2.5vw + 1rem, 2.4rem); } h3 { font-size: 1.15rem; font-weight: 700; } p { margin: 0 0 1em; color: var(--color-texto-secundario); } /* 3. Utilidades --------------------------------------------- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--color-primario); color: #fff; padding: 12px 20px; z-index: 1000; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } .btn { display: inline-block; padding: 14px 28px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; border: 2px solid transparent; transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition); } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--color-acento); color: #fff; } .btn--primary:hover { background: var(--color-acento-oscuro); box-shadow: var(--shadow-sm); } .btn--outline { background: transparent; color: #fff; border-color: #fff; } .btn--outline:hover { background: rgba(255,255,255,0.12); } .btn--lg { padding: 16px 34px; font-size: 1rem; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 2px; } .eyebrow { display: inline-block; color: var(--color-acento-oscuro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 0.75em; } /* El efecto de aparición al hacer scroll solo se activa si JS confirma que puede revelar el contenido (ver clase "js" en , asignada por un script inline en el ). Sin JS, todo el contenido es visible desde el primer render. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .js .reveal.is-visible { opacity: 1; transform: translateY(0); } /* 4. Header / navegación ------------------------------------ */ .header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: var(--color-blanco); box-shadow: var(--shadow-sm); z-index: 500; } .header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .header__logo img { height: 84px; width: auto; } .header__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; background: none; border: none; padding: 0; z-index: 501; } .header__toggle span { display: block; height: 3px; border-radius: 2px; background: var(--color-primario); transition: transform var(--transition), opacity var(--transition); } .header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .nav { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: var(--color-blanco); display: flex; flex-direction: column; justify-content: flex-start; gap: 24px; padding: 32px 24px; transform: translateX(100%); transition: transform var(--transition); overflow-y: auto; } .nav.is-open { transform: translateX(0); } .nav__list { display: flex; flex-direction: column; gap: 4px; } .nav__link { display: block; padding: 14px 4px; font-weight: 600; color: var(--color-primario); border-bottom: 1px solid var(--color-fondo-gris); } .nav__link:hover { color: var(--color-acento); } .nav__cta { text-align: center; } /* 5. Hero ----------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: var(--header-h); } .hero__video, .hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,46,92,0.78) 0%, rgba(11,46,92,0.62) 55%, rgba(11,46,92,0.85) 100%); } .hero__content { position: relative; z-index: 2; color: #fff; max-width: 760px; } .hero__eyebrow { color: #9FD6A6; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; } .hero__title { color: #fff; } .hero__subtitle { color: rgba(255,255,255,0.9); font-size: 1.05rem; max-width: 620px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; } /* 6. Secciones genéricas -------------------------------------- */ .section { padding: 96px 0; } .section--alt { background: var(--color-fondo-gris); } .section__head { max-width: 680px; margin: 0 auto 48px; text-align: center; } .section__lead { font-size: 1.05rem; } /* Grids base */ .cards-grid { display: grid; gap: 28px; } .cards-grid--categorias { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .cards-grid--elegirnos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .cards-grid--sectores { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* 7. Categorías ------------------------------------------------ */ .card-categoria { background: var(--color-blanco); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; } .card-categoria:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .card-categoria__img { aspect-ratio: 4 / 3; overflow: hidden; } .card-categoria__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .card-categoria:hover .card-categoria__img img { transform: scale(1.06); } .card-categoria__body { padding: 20px 22px 26px; flex: 1; display: flex; flex-direction: column; } .card-categoria__body p { flex: 1; } .card-categoria__link { color: var(--color-acento-oscuro); font-weight: 700; } .card-categoria__link:hover { text-decoration: underline; } /* 8. Quiénes somos ---------------------------------------------- */ .nosotros__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } .nosotros__img img { border-radius: var(--radius); box-shadow: var(--shadow-md); aspect-ratio: 6 / 7; object-fit: cover; } .nosotros__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; } .nosotros__col { background: var(--color-fondo-gris); padding: 20px; border-radius: var(--radius-sm); border-left: 4px solid var(--color-acento); } .nosotros__col h3 { margin-bottom: 0.4em; } .nosotros__col p { margin: 0; } /* 9. Por qué elegirnos -------------------------------------------- */ .card-valor { background: var(--color-blanco); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 0 0 24px; overflow: hidden; text-align: center; transition: transform var(--transition); } .card-valor:hover { transform: translateY(-4px); } .card-valor img { aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 18px; } .card-valor h3 { padding: 0 20px; } .card-valor p { padding: 0 20px; margin: 0; } /* 10. Galería filtrable --------------------------------------------- */ .filtros { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; } .filtro { background: var(--color-blanco); border: 2px solid var(--color-fondo-gris); color: var(--color-primario); padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; transition: background var(--transition), color var(--transition), border-color var(--transition); } .filtro:hover { border-color: var(--color-acento); } .filtro--activo { background: var(--color-primario); border-color: var(--color-primario); color: #fff; } .galeria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; } .galeria-card { background: var(--color-blanco); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: opacity 0.3s ease, transform 0.3s ease; } .galeria-card__img { aspect-ratio: 4 / 3; overflow: hidden; } .galeria-card__img img { width: 100%; height: 100%; object-fit: cover; } .galeria-card__body { padding: 16px 18px 20px; } .galeria-card__categoria { color: var(--color-acento-oscuro); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .galeria-card__body h3 { font-size: 1rem; margin: 6px 0 6px; } .galeria-card__body p { font-size: 0.9rem; margin: 0; } .galeria-vacio { text-align: center; color: var(--color-texto-secundario); grid-column: 1 / -1; padding: 40px 0; } /* 11. Sectores ------------------------------------------------------- */ .card-sector { background: var(--color-blanco); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); text-align: center; transition: transform var(--transition); } .card-sector:hover { transform: translateY(-4px); } .card-sector img { aspect-ratio: 4 / 3; object-fit: cover; } .card-sector h3 { padding: 16px 12px; margin: 0; font-size: 1rem; } /* 12. FAQ / acordeón --------------------------------------------------- */ .acordeon { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .acordeon__item { background: var(--color-blanco); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; } .acordeon__pregunta { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; text-align: left; padding: 18px 22px; font-weight: 700; font-size: 1rem; color: var(--color-primario); } .acordeon__icono { font-size: 1.3rem; color: var(--color-acento); transition: transform var(--transition); flex-shrink: 0; } .acordeon__pregunta[aria-expanded="true"] .acordeon__icono { transform: rotate(45deg); } .acordeon__respuesta { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .acordeon__respuesta p { padding: 0 22px 20px; margin: 0; } /* 13. Contacto / formulario --------------------------------------------- */ .contacto__grid { display: grid; grid-template-columns: 1fr; gap: 48px; } .contacto__img { border-radius: var(--radius); margin-top: 24px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-sm); } .contacto__form { background: var(--color-fondo-gris); padding: 32px; border-radius: var(--radius); display: flex; flex-direction: column; gap: 18px; } .form__campo { display: flex; flex-direction: column; gap: 6px; } .form__campo label { font-weight: 600; font-size: 0.9rem; color: var(--color-primario); } .form__campo input, .form__campo textarea { padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid #D3D8E0; font-family: inherit; font-size: 0.95rem; resize: vertical; } .form__campo input:invalid[data-touched="true"], .form__campo textarea:invalid[data-touched="true"] { border-color: #C0392B; } .form__error { color: #C0392B; font-size: 0.82rem; min-height: 1em; } .form__submit { align-self: flex-start; border: none; } .form__alt { font-size: 0.88rem; margin: 0; } .form__alt a { color: var(--color-acento-oscuro); font-weight: 600; } .form__estado { font-weight: 600; margin: 0; } .form__estado[data-estado="ok"] { color: var(--color-acento-oscuro); } .form__estado[data-estado="error"] { color: #C0392B; } /* 14. Footer ---------------------------------------------------------- */ .footer { background: var(--color-primario); color: rgba(255,255,255,0.85); padding-top: 64px; } .footer__inner { display: grid; grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; } .footer__brand img { height: 60px; width: auto; margin-bottom: 12px; } .footer__brand p { color: rgba(255,255,255,0.7); max-width: 320px; } .footer__nav { display: flex; flex-direction: column; gap: 10px; } .footer__nav a:hover, .footer__legal a:hover { color: var(--color-acento); } .footer__legal { display: flex; flex-direction: column; gap: 10px; } .footer__bottom { border-top: 1px solid rgba(255,255,255,0.15); padding: 20px 0; margin-top: 24px; } .footer__bottom p { margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.6); } /* 15. Páginas legales --------------------------------------------------- */ .legal-page { padding: calc(var(--header-h) + 64px) 0 96px; max-width: 800px; margin: 0 auto; } .legal-page h1 { margin-bottom: 0.3em; } .legal-page .aviso-pendiente { background: var(--color-fondo-gris); border-left: 4px solid var(--color-acento); padding: 16px 20px; border-radius: var(--radius-sm); margin-bottom: 32px; font-size: 0.92rem; } /* 16. Responsive --------------------------------------------------------- */ @media (min-width: 768px) { .header__toggle { display: none; } .nav { position: static; flex-direction: row; align-items: center; justify-content: flex-end; transform: none; padding: 0; height: auto; overflow: visible; } .nav__list { flex-direction: row; gap: 4px; } .nav__link { border-bottom: none; padding: 8px 12px; font-size: 0.92rem; } .nav__cta { padding: 10px 22px; } .nosotros__grid { grid-template-columns: 0.85fr 1fr; } .contacto__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { .cards-grid--categorias { grid-template-columns: repeat(3, 1fr); } .cards-grid--elegirnos { grid-template-columns: repeat(4, 1fr); } .cards-grid--sectores { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 1200px) { .galeria-grid { grid-template-columns: repeat(4, 1fr); } }