/* Fuentes alojadas en el propio sitio (sin pedirlas a Google: privacidad y rapidez). Subconjunto latino. */ @font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/caveat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../assets/fonts/montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --blue: #0b5ea8; --blue-dark: #08407a; --green: #3c9c54; /* verde del logo (decorativo) */ --green-d: #23864a; /* verde del logo, más oscuro: botones y texto (contraste AA) */ --ink: #0f2a43; --muted: #52667a; --bg: #ffffff; --bg-soft: #f3f9fc; --line: #dce8ef; --radius: 18px; --shadow: 0 10px 30px rgba(11, 94, 168, .10); --grad: linear-gradient(120deg, var(--blue), var(--green)); --header-h: 84px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, p, figure { margin: 0; } .container { width: min(1200px, 100% - 40px); margin-inline: auto; } .ico { width: 1.25em; height: 1.25em; flex: none; } .ico-sm { width: 1em; height: 1em; } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .65em; padding: .95em 1.7em; border-radius: 999px; border: 2px solid transparent; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; } .btn:hover { transform: translateY(-2px); } .btn:focus-visible, .nav a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(35, 134, 74, .45); outline-offset: 2px; } .btn-primary { background: var(--green-d); color: #fff; box-shadow: 0 10px 24px rgba(35, 134, 74, .32); } .btn-primary:hover { background: #1b6e3b; } .btn-outline { border-color: var(--green-d); color: var(--green-d); background: rgba(255, 255, 255, .85); } .btn-outline:hover { background: var(--green-d); color: #fff; } .btn-whatsapp { background: var(--green-d); color: #fff; padding: .7em 1.3em; box-shadow: 0 8px 20px rgba(35, 134, 74, .28); } .btn-whatsapp:hover { background: #1b6e3b; } /* ---------- Cabecera ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; transition: background .25s ease, box-shadow .25s ease; } .header-inner { display: flex; align-items: center; gap: 30px; height: 132px; transition: height .25s ease; } .brand img { height: 112px; width: auto; transition: height .25s ease; } .nav { display: flex; gap: 34px; margin-left: auto; } .nav a { font-weight: 600; font-size: .95rem; color: var(--blue); padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color .2s; } .nav a:hover, .nav a.active { border-color: var(--green-d); } .header-cta { display: flex; align-items: center; gap: 22px; } .tel { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; color: var(--blue); font-size: 1rem; } .menu-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; } .menu-toggle span { display: block; height: 2px; background: var(--blue); margin: 6px 0; transition: transform .2s, opacity .2s; } .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .site-header.scrolled { background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(11, 94, 168, .10); } .site-header.scrolled .header-inner { height: 78px; } .site-header.scrolled .brand img { height: 62px; } /* ---------- Hero ---------- */ .hero { position: relative; background: #fff; overflow: hidden; padding: 150px 0 60px; min-height: 640px; display: flex; align-items: center; } .hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; } .hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .93) 22%, rgba(255, 255, 255, 0) 56%), linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 22%), linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 16%); } .hero-inner { position: relative; z-index: 2; } .hero-copy { max-width: 760px; } .eyebrow { color: var(--green-d); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; margin-bottom: 14px; } h1 { font-size: clamp(2.2rem, 3.9vw, 3.3rem); line-height: 1.08; font-weight: 800; color: var(--blue-dark); letter-spacing: -.02em; } h1 span { display: block; white-space: nowrap; } h1 span, h2 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead { margin: 24px 0 0; font-size: 1.05rem; color: #2f4a63; max-width: 58ch; } .lead strong { color: var(--blue-dark); } .hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; } /* ---------- Valores ---------- */ .values { position: relative; background: linear-gradient(180deg, #fff 0%, #f4fafc 100%); border-top: 1px solid var(--line); overflow: hidden; } .values-list { display: grid; grid-template-columns: repeat(5, 1fr); } .values-list li { display: flex; align-items: center; gap: 14px; padding: 26px 18px; border-right: 1px solid var(--line); } .values-list li:last-child { border-right: 0; } .vi { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--green-d); background: #e8f5ec; flex: none; } .vi .ico { width: 24px; height: 24px; } .values-list b { display: block; font-size: .86rem; color: var(--blue-dark); line-height: 1.25; } .values-list span:not(.vi) { font-size: .75rem; color: var(--muted); line-height: 1.35; display: block; } /* ---------- Secciones ---------- */ section { padding: 96px 0; } .hero { padding: 150px 0 70px; } .values { padding: 0 0 120px; } h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.15; font-weight: 800; color: var(--blue-dark); letter-spacing: -.015em; } .section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 52px; } .section-title { max-width: 980px; } .section-title h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); } .section-title > p:last-child { margin-top: 16px; color: var(--muted); max-width: 70ch; } .section-head-center { justify-content: center; text-align: center; } .eyebrow-lines { display: flex; align-items: center; gap: 18px; } .eyebrow-lines::before { content: ""; width: 72px; height: 2px; background: var(--green-d); } .eyebrow-lines::after { content: ""; width: 72px; height: 2px; background: var(--green-d); } .section-title .eyebrow-lines::after { display: none; } .section-title .eyebrow-lines::before { width: 56px; } .section-title .eyebrow-lines::after { display: block; width: 56px; } .script { font-family: "Caveat", cursive; font-weight: 600; font-size: 2.2rem; line-height: 1.05; color: var(--blue); transform: rotate(-4deg); text-align: right; white-space: nowrap; padding-bottom: 14px; position: relative; flex: none; margin-top: 8px; } .script .ico { width: 1em; height: 1em; color: var(--green); vertical-align: -.12em; } .script::after { content: ""; position: absolute; left: 6%; right: 0; bottom: 0; height: 8px; border-radius: 50%; border-bottom: 3px solid #1a8fe0; transform: rotate(-2deg); } /* ---------- Servicios ---------- */ .services { background: linear-gradient(180deg, #f4fafc 0%, #eef7fb 100%); position: relative; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .card { background: #fff; border-radius: var(--radius); border: 1px solid #e3eef4; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(11, 94, 168, .17); } .card-img { position: relative; height: 210px; } .card-img img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .5s ease; } .card:hover .card-img img { transform: scale(1.04); } .card:nth-child(6) .card-img img { object-position: 72% 38%; } .card:nth-child(1) .card-img img { object-position: 70% 30%; } .badge { position: absolute; left: 24px; bottom: -30px; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, #3fae5e, var(--green-d)); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 5px #fff, 0 10px 20px rgba(35, 134, 74, .35); z-index: 2; } .badge .ico { width: 28px; height: 28px; } .card-img { overflow: visible; } .card-img img { border-radius: var(--radius) var(--radius) 0 0; } .card-body { padding: 46px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .card h3 { font-size: 1.15rem; color: var(--blue); line-height: 1.25; font-weight: 700; } .card p { font-size: .92rem; color: var(--muted); } .card ul { margin-top: auto; padding-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; } .card li { font-size: .8rem; font-weight: 500; padding-left: 24px; position: relative; line-height: 1.35; } .card li::before { content: ""; position: absolute; left: 0; top: .1em; width: 16px; height: 16px; border-radius: 50%; background: var(--green-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; } /* ---------- Quiénes somos ---------- */ .about { background: #fff; } .about-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; } .about-text { display: grid; gap: 20px; color: var(--muted); font-size: 1.08rem; border-left: 4px solid; border-image: linear-gradient(180deg, var(--blue), #0a9ad8, var(--green)) 1; padding-left: 32px; } .about-text strong { color: var(--blue); } /* ---------- Galería ---------- */ .gallery { background: var(--bg-soft); } .gallery .section-head { margin-bottom: 40px; flex-direction: column; align-items: center; gap: 12px; } .mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 16px; } .mosaic figure { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); } .mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .mosaic figure:hover img { transform: scale(1.05); } .m-big { grid-column: span 2; grid-row: span 2; } .m-wide { grid-column: span 2; } /* ---------- Contacto ---------- */ .contact { background: linear-gradient(135deg, var(--blue-dark), var(--blue) 55%, #2b8f4e); color: #fff; } .contact h2, .contact .eyebrow { color: #fff; } .contact .eyebrow { opacity: .85; } .contact-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; } .contact-list { display: grid; gap: 18px; margin-top: 30px; } .contact-list li { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 1.1rem; } .contact-list .ico { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: rgba(255, 255, 255, .16); } .contact-list a:hover { text-decoration: underline; } .form { background: #fff; color: var(--ink); border-radius: 22px; padding: 34px; display: grid; gap: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { display: grid; gap: 6px; } .field label { font-weight: 600; font-size: .85rem; color: var(--blue); } .field small { font-weight: 400; color: var(--muted); } input[type=text], input[type=tel], input[type=email], select, textarea { width: 100%; font: inherit; font-size: .95rem; color: var(--ink); background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 12px; padding: .8em 1em; } input:focus, select:focus, textarea:focus { border-color: var(--green-d); background: #fff; } textarea { resize: vertical; } .consent { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; color: var(--muted); } .consent input { margin-top: 3px; accent-color: var(--green-d); } .hp { position: absolute; left: -9999px; } .form .btn { justify-self: start; } .form-msg { font-size: .9rem; font-weight: 600; min-height: 1.3em; } .form-msg.ok { color: var(--green-d); } .form-msg.err { color: #b3261e; } .field.invalid input, .field.invalid select { border-color: #b3261e; } /* ---------- Pie ---------- */ .site-footer { background: #fff; border-top: 1px solid var(--line); padding: 44px 0 96px; } .footer-inner { display: grid; justify-items: center; gap: 12px; text-align: center; } .brand-footer img { height: 120px; } .legal { font-size: .85rem; color: var(--muted); } .legal a:hover { text-decoration: underline; } /* ---------- WhatsApp flotante ---------- */ .float-wa { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; background: #25a55a; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); transition: transform .15s; } .float-wa:hover { transform: scale(1.07); } .float-wa .ico { width: 32px; height: 32px; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .nav { gap: 22px; } .tel span { display: none; } .cards { grid-template-columns: repeat(2, 1fr); } .values-list { grid-template-columns: repeat(3, 1fr); } .values-list li:nth-child(3) { border-right: 0; } .values-list li:nth-child(n+4) { border-top: 1px solid var(--line); } .hero-media { width: 70%; } } @media (max-width: 900px) { .site-header { background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); box-shadow: 0 2px 16px rgba(11, 94, 168, .10); } .header-inner, .site-header.scrolled .header-inner { height: 70px; } .brand img, .site-header.scrolled .brand img { height: 54px; } .menu-toggle { display: block; margin-left: auto; } .header-cta { display: none; } .nav { position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px rgba(0, 0, 0, .08); max-height: 0; overflow: hidden; transition: max-height .25s ease; } .nav.open { max-height: 360px; } .nav a { padding: 16px 20px; border-bottom: 1px solid var(--line); } h1 span { white-space: normal; } h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); } .hero { display: block; min-height: 0; padding: 70px 0 40px; } .hero-media { position: relative; width: 100%; height: 300px; } .hero-media::before { background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 45%); } .hero-inner { margin-top: -30px; } .about-inner, .contact-inner { grid-template-columns: 1fr; gap: 36px; } section { padding: 68px 0; } .section-head { flex-direction: column; gap: 18px; } .script { align-self: flex-end; font-size: 1.9rem; } .mosaic { grid-auto-rows: 160px; gap: 12px; } } @media (max-width: 620px) { .cards { grid-template-columns: 1fr; } .values-list { grid-template-columns: 1fr 1fr; } .values-list li { border-right: 0; border-top: 1px solid var(--line); padding: 18px 8px; } .values-list li:first-child, .values-list li:nth-child(2) { border-top: 0; } .values-list li:last-child { grid-column: span 2; } .row { grid-template-columns: 1fr; } .form { padding: 22px; } .hero-actions .btn { flex: 1 1 100%; } .card ul { grid-template-columns: 1fr; } .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; } .m-big { grid-column: span 2; grid-row: span 2; } .m-wide { grid-column: span 2; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* Huecos de galería (pendiente de fotos de la clienta) */ .mosaic figure.ph { display: grid; place-items: center; background: linear-gradient(135deg, #e6f2f8, #eaf6f2); border: 2px dashed #b9d6e2; box-shadow: none; color: #8bb4c6; } .mosaic figure.ph .ico { width: 44px; height: 44px; } /* Recurso gráfico: curvas y degradados del logo, con una composición distinta en cada zona */ /* 1. Portada: bandas anchas en los bordes que se estrechan hacia el centro */ .waves { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 130px; display: block; pointer-events: none; } /* 2. Quiénes somos: cintas finas que cruzan la sección */ .about { position: relative; overflow: hidden; padding-bottom: 210px; } .ribbons { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 190px; pointer-events: none; } /* 3. Contacto: borde superior ondulado a todo el ancho y anillos suaves */ .contact { position: relative; overflow: hidden; padding-top: 170px; } .edge-top { position: absolute; left: 0; right: 0; top: -1px; width: 100%; height: 120px; pointer-events: none; } .rings { position: absolute; left: 0; bottom: 0; width: 360px; height: 360px; pointer-events: none; } .contact-inner { position: relative; z-index: 1; } /* 4. Pie: cinta fina */ .site-footer { position: relative; padding-top: 70px; } .ribbon-line { position: absolute; top: 0; left: 0; width: 100%; height: 36px; pointer-events: none; } /* Desplegable de servicios (propio, en lugar del