/* ========================================================================== Jardinería El Roble — hoja de estilo única Sistema: "Sombra fresca" (ver DESIGN-SYSTEM.md) Orden: tokens · base · tipografía · layout · cabecera · botones · héroe · motivos · secciones · año · fotos · mapa · FAQ · pie · movimiento · media queries ========================================================================== */ /* Las tres familias (Alegreya, Alegreya Sans, Alegreya Sans SC) se cargan con un en el de cada página, no con @import, para no retrasar el pintado. Si no hay red, las pilas de reserva declaradas más abajo mantienen la página legible. */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Paleta — nombres tomados del jardín, no del sistema */ --cal: #EDF0EA; /* cal de la pared encalada: el suelo de la página */ --cal-alta: #F7F9F4; /* cal recién dada: paneles elevados */ --linea: #D5DCCE; /* junta entre piedras: filetes */ --sombra: #16332B; /* sombra bajo la palmera: tinta y masas oscuras */ --ramaje: #4A6258; /* hoja en penumbra: texto secundario */ --agua: #0A6E68; /* agua de goteo: el acento, la acción principal */ --agua-clara: #2FA79E; /* agua al sol: acentos sobre oscuro */ --albero: #C99B45; /* albero, la grava andaluza: marcas y filetes */ --albero-tinta: #7E5A1B; /* albero en sombra: ocre legible sobre claro */ /* Roles (se invierten en .on-dark) */ --ground: var(--cal); --panel: var(--cal-alta); --ink: var(--sombra); --ink-2: var(--ramaje); --line: var(--linea); --tick: var(--albero); /* Tipografía */ --display: "Alegreya", "Iowan Old Style", Georgia, "Times New Roman", serif; --body: "Alegreya Sans", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; --util: "Alegreya Sans SC", "Alegreya Sans", "Avenir Next", system-ui, sans-serif; --t-micro: 0.9375rem; /* 15px — versalitas (ópticamente menores), nunca texto corrido */ --t-body: 1.0625rem; /* 17px — mínimo de lectura */ --t-lead: clamp(1.15rem, 0.98rem + 0.7vw, 1.375rem); --t-h3: clamp(1.3rem, 1.2rem + 0.5vw, 1.55rem); --t-h2: clamp(1.85rem, 1.5rem + 1.6vw, 2.9rem); --t-h1: clamp(2.35rem, 1.5rem + 3.8vw, 4.4rem); --t-h1-sub: clamp(1.1rem, 1rem + 0.6vw, 1.35rem); /* Espacio */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --sec-y: clamp(3.75rem, 2rem + 7vw, 7rem); /* Forma */ --r-sm: 4px; /* marcos de foto: forma de fotografía */ --r: 10px; /* paneles */ --r-lg: 18px; /* bloques grandes */ --r-pill: 999px; /* acciones */ --sh-1: 0 1px 2px rgba(22, 51, 43, 0.05), 0 10px 26px -16px rgba(22, 51, 43, 0.28); --sh-2: 0 2px 4px rgba(22, 51, 43, 0.06), 0 24px 48px -28px rgba(22, 51, 43, 0.42); /* Movimiento */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --d-1: 180ms; --d-2: 420ms; --d-3: 700ms; } .on-dark { --ground: var(--sombra); --panel: #1D4038; --ink: var(--cal); --ink-2: #C3CFC5; --line: rgba(237, 240, 234, 0.18); --tick: var(--albero); background: var(--sombra); color: var(--cal); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cal); color: var(--sombra); font-family: var(--body); font-size: var(--t-body); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } svg { display: block; } a { color: var(--agua); } :focus-visible { outline: 3px solid var(--agua); outline-offset: 3px; border-radius: 2px; } .on-dark :focus-visible { outline-color: var(--albero); } ::selection { background: rgba(10, 110, 104, 0.16); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); z-index: 100; background: var(--sombra); color: var(--cal); padding: 0.85rem 1.5rem; border-radius: 0 0 var(--r) var(--r); font-family: var(--util); font-size: 1rem; text-decoration: none; } .skip:focus { transform: translate(-50%, 0); } /* -------------------------------------------------------------------------- 3. Tipografía -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.012em; text-wrap: balance; } .h1 { font-size: var(--t-h1); line-height: 1.03; } .h2 { font-size: var(--t-h2); line-height: 1.1; } .h3 { font-size: var(--t-h3); line-height: 1.2; } .h1 .soft { display: block; font-weight: 500; font-style: italic; letter-spacing: -0.005em; } p { margin: 0 0 1.05em; } p:last-child { margin-bottom: 0; } .lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); } .prose { max-width: 60ch; } .prose--wide { max-width: 68ch; } .eyebrow { font-family: var(--util); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; color: var(--ink-2); margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: 0.7em; } .eyebrow::before { content: ""; width: 26px; height: 2px; flex: none; background: var(--tick); } .eyebrow--plain::before { display: none; } .note { font-family: var(--util); font-size: var(--t-micro); letter-spacing: 0.04em; color: var(--ink-2); } .wordmark-inline { font-family: var(--display); font-weight: 700; } /* -------------------------------------------------------------------------- 4. Layout -------------------------------------------------------------------------- */ .wrap { width: min(100% - 2.5rem, 1180px); margin-inline: auto; } .wrap--narrow { width: min(100% - 2.5rem, 880px); } .section { padding-block: var(--sec-y); } .section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); } .section__head { margin-bottom: var(--sp-6); } .section__head .lead { margin-top: var(--sp-4); } .split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; } @media (min-width: 900px) { .split--text-aside { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 5. Cabecera y navegación — visible siempre, sin menús escondidos -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(237, 240, 234, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: box-shadow var(--d-2) var(--ease), border-color var(--d-2) var(--ease); } .site-header.is-stuck { border-bottom-color: var(--linea); box-shadow: 0 10px 30px -24px rgba(22, 51, 43, 0.6); } .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: 0.55rem; } .brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--sombra); padding: 0.25rem 0.15rem; } .brand__mark { width: 30px; height: 30px; flex: none; } .mark-stem { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .mark-cup { fill: var(--albero); } .mark-nut { fill: currentColor; } .brand__text { display: block; line-height: 1; } .brand__over { display: block; font-family: var(--util); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; color: var(--ramaje); } .brand__name { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 0.08em; } .site-nav ul { list-style: none; display: flex; align-items: center; gap: clamp(0.35rem, 1.4vw, 1.1rem); margin: 0; padding: 0; } .site-nav a { display: block; font-family: var(--util); font-size: 1.0625rem; font-weight: 500; letter-spacing: 0.05em; color: var(--sombra); text-decoration: none; padding: 0.6rem 0.7rem; border-radius: var(--r-sm); position: relative; } .site-nav a::after { content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.32rem; height: 2px; background: var(--albero); transform: scaleX(0); transform-origin: left; transition: transform var(--d-2) var(--ease); } .site-nav a:hover::after { transform: scaleX(1); } .site-nav a[aria-current="page"] { font-weight: 700; } .site-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--sombra); } .site-header__actions { display: flex; align-items: center; gap: var(--sp-3); } @media (min-width: 860px) { .site-nav { order: 1; } .site-header__actions { order: 2; } } /* -------------------------------------------------------------------------- 6. Botones y acciones -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0.75rem 1.4rem; border: 2px solid transparent; border-radius: var(--r-pill); font-family: var(--util); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.03em; text-decoration: none; cursor: pointer; transition: background-color var(--d-1) var(--ease), color var(--d-1) var(--ease), transform var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease); } .btn__ico { width: 22px; height: 22px; flex: none; } .btn__ico path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .btn--primary { background: var(--agua); color: #FFFFFF; box-shadow: 0 1px 2px rgba(22, 51, 43, 0.14), 0 12px 22px -16px rgba(10, 110, 104, 0.9); } .btn--primary:hover { background: #0A5F5A; transform: translateY(-1px); } .btn--primary:active { transform: translateY(0); } .btn--invert { background: var(--cal); color: var(--sombra); } .btn--invert:hover { background: #FFFFFF; transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { border-color: var(--ink); background: rgba(22, 51, 43, 0.03); } .btn--sm { min-height: 44px; padding: 0.5rem 1.05rem; font-size: 1.0625rem; } .btn--lg { min-height: 58px; padding: 0.95rem 1.9rem; font-size: 1.1875rem; } .btn--block { width: 100%; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); } .actions__aside { font-family: var(--util); font-size: 1.0625rem; color: var(--ink-2); } .actions__aside a { color: var(--ink); text-underline-offset: 4px; } .link-strong { color: var(--agua); font-weight: 500; text-underline-offset: 4px; text-decoration-thickness: 1px; } .on-dark .link-strong { color: var(--albero); } /* -------------------------------------------------------------------------- 7. Héroe de portada — la sombra de la palmera sobre la pared encalada -------------------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.25rem, 1.5rem + 8vw, 7.5rem) clamp(3rem, 1.5rem + 5vw, 5.5rem); } .hero::before { /* luz de tarde que cae desde la derecha */ content: ""; position: absolute; inset: -20% -10% auto auto; width: 78vw; height: 120%; background: radial-gradient(60% 55% at 78% 22%, rgba(255, 253, 244, 0.9) 0%, rgba(255, 253, 244, 0) 70%); z-index: -3; pointer-events: none; } .fronds { position: absolute; inset: -6% -4% auto -4%; width: 108%; height: 128%; color: var(--sombra); z-index: -2; pointer-events: none; } .grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.5; pointer-events: none; mix-blend-mode: multiply; } .hero__inner { max-width: 46rem; } .hero__eyebrow { font-family: var(--util); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.14em; color: var(--ramaje); margin: 0 0 var(--sp-5); } .hero__eyebrow span { white-space: nowrap; } .hero__eyebrow .dot { color: var(--albero); padding-inline: 0.4em; } .hero .h1 { margin-bottom: var(--sp-5); } .hero__sub { font-size: var(--t-h1-sub); line-height: 1.55; color: var(--ramaje); max-width: 40ch; margin-bottom: var(--sp-6); } .hero__foot { margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem); max-width: 42ch; } .hero__foot p { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); line-height: 1.45; color: var(--sombra); } /* Héroe de página interior */ .page-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 1.5rem + 6vw, 5.5rem) clamp(2.5rem, 1.5rem + 4vw, 4rem); } .page-hero .h1 { margin-bottom: var(--sp-5); } .page-hero .lead { max-width: 54ch; } .page-hero--dark .lead { color: var(--ink-2); } .page-hero__rule { margin-top: clamp(2rem, 1rem + 3vw, 3rem); } /* -------------------------------------------------------------------------- 8. Motivos: la línea de goteo (divisor) y el filete de albero -------------------------------------------------------------------------- */ .drip { height: 11px; width: 100%; background-image: linear-gradient(to bottom, transparent 5px, var(--line) 5px, var(--line) 6px, transparent 6px), radial-gradient(circle 3.5px at 24px 5.5px, var(--agua) 98%, transparent 100%); background-size: 100% 11px, 56px 11px; background-repeat: repeat-x; } .on-dark .drip { background-image: linear-gradient(to bottom, transparent 5px, rgba(237, 240, 234, 0.22) 5px, rgba(237, 240, 234, 0.22) 6px, transparent 6px), radial-gradient(circle 3.5px at 24px 5.5px, var(--albero) 98%, transparent 100%); } .rule-block { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); } /* -------------------------------------------------------------------------- 9. Lista de servicios (resumen de portada) -------------------------------------------------------------------------- */ .jobs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .jobs__item { border-bottom: 1px solid var(--line); padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem); display: grid; gap: 0.4rem var(--sp-5); grid-template-columns: 40px minmax(0, 1fr); align-items: start; } .jobs__ico { width: 34px; height: 34px; color: var(--agua); grid-row: span 2; margin-top: 0.1rem; } .jobs__ico path, .jobs__ico circle { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .jobs__name { font-family: var(--display); font-size: var(--t-h3); font-weight: 700; line-height: 1.2; margin: 0; } .jobs__desc { color: var(--ink-2); margin: 0; max-width: 58ch; } @media (min-width: 860px) { .jobs__item { grid-template-columns: 40px minmax(14rem, 20rem) minmax(0, 1fr); align-items: baseline; gap: var(--sp-5); } .jobs__ico { grid-row: auto; align-self: start; } } .after-list { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); } /* -------------------------------------------------------------------------- 10. El jardinero + la tarjeta del tablón -------------------------------------------------------------------------- */ .card-pin { position: relative; background: var(--cal-alta); border: 1px solid var(--linea); border-radius: var(--r-sm); box-shadow: var(--sh-2); padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); transform: rotate(-1.4deg); max-width: 24rem; margin-inline: auto; } .card-pin::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--linea); border-radius: 2px; pointer-events: none; } .card-pin__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--sp-5); color: var(--sombra); } .card-pin__head .brand__mark { width: 34px; height: 34px; } .card-pin__name { font-family: var(--display); font-size: 1.45rem; font-weight: 700; line-height: 1.05; } .card-pin__over { display: block; font-family: var(--util); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; color: var(--ramaje); } .card-pin__lines { font-family: var(--util); font-size: 1.0625rem; letter-spacing: 0.03em; line-height: 1.75; color: var(--sombra); margin: 0; } .card-pin__lines a { color: var(--agua); text-underline-offset: 3px; } .card-pin__foot { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--linea); font-family: var(--util); font-size: 0.9375rem; letter-spacing: 0.06em; color: var(--ramaje); } .card-caption { margin-top: var(--sp-5); text-align: center; max-width: 24rem; margin-inline: auto; } /* -------------------------------------------------------------------------- 11. El año del jardín — elemento firma -------------------------------------------------------------------------- */ .year { margin-top: var(--sp-7); background: var(--cal-alta); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem); box-shadow: var(--sh-1); } .year__months { font-family: var(--util); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ramaje); text-align: center; margin-bottom: 0.55rem; } .year__spacer { display: none; } .year__months .year__track--labels { margin-block: 0; } .year__months .m-long { display: none; } .year__months .m-short { display: inline; } .year__rows { list-style: none; margin: 0; padding: 0; } .year__row { padding-block: clamp(0.85rem, 0.6rem + 0.8vw, 1.15rem); border-top: 1px solid var(--linea); } .year__row:first-child { border-top: 0; padding-top: 0.3rem; } .year__text { display: block; } .year__label { font-family: var(--body); font-size: 1.0625rem; font-weight: 700; color: var(--sombra); display: block; } .year__range { font-family: var(--util); font-size: 0.9375rem; letter-spacing: 0.05em; color: var(--ramaje); display: block; } .year__track { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-block: 0.5rem 0.35rem; } .year__cell { position: relative; height: 15px; border-radius: 3px; background: rgba(22, 51, 43, 0.055); } .year__cell.on::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--bar, var(--ramaje)); transform: scaleX(1); transform-origin: left center; } .year__row--mant { --bar: #6E8A78; } .year__row--poda { --bar: var(--sombra); } .year__row--riego { --bar: var(--agua); } .year__row--plant { --bar: #A87C2C; } /* albero oscurecido: 3.5:1 sobre el panel */ .year__foot { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--linea); color: var(--ink-2); max-width: 62ch; } @media (min-width: 860px) { .year__row, .year__months { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); align-items: center; column-gap: var(--sp-5); } .year__track { margin-block: 0; grid-column: 2; grid-row: 1; } .year__text, .year__spacer { grid-column: 1; grid-row: 1; } .year__spacer { display: block; } .year__months .m-long { display: inline; } .year__months .m-short { display: none; } .year__cell { height: 17px; } } /* -------------------------------------------------------------------------- 12. Marcos de foto — dirigidos, a la espera de las fotos del cliente -------------------------------------------------------------------------- */ .frames { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-top: var(--sp-6); } .frame { margin: 0; } .frame__slot { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(213, 220, 206, 0.35)), var(--cal-alta); border: 1px solid var(--linea); border-radius: var(--r-sm); display: grid; place-items: center; overflow: hidden; } .frame--tall .frame__slot { aspect-ratio: 3 / 4; } .frame__slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .frame__mark { width: 34%; max-width: 90px; height: auto; opacity: 0.13; color: var(--sombra); } .frame figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-top: 0.65rem; font-family: var(--util); font-size: 0.9375rem; letter-spacing: 0.08em; color: var(--ramaje); } .frame figcaption b { font-weight: 700; color: var(--sombra); letter-spacing: 0.1em; } /* -------------------------------------------------------------------------- 13. Mapa de la zona -------------------------------------------------------------------------- */ .map { margin-top: var(--sp-6); border: 1px solid var(--linea); border-radius: var(--r-lg); overflow: hidden; background: var(--cal-alta); } .map svg { width: 100%; height: auto; } .map-sea { fill: rgba(10, 110, 104, 0.1); } .map-coast { fill: none; stroke: rgba(10, 110, 104, 0.5); stroke-width: 2; } .map-ridge { fill: none; stroke: rgba(74, 98, 88, 0.4); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .map-route { fill: none; stroke: var(--albero); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .map-branch { fill: none; stroke: var(--albero); stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; } .map-dot { fill: var(--sombra); } .map-halo { fill: none; stroke: var(--sombra); stroke-width: 1.5; opacity: 0.28; } .map-label { font-family: var(--util); font-size: 19px; font-weight: 700; letter-spacing: 0.06em; fill: var(--sombra); } .map-sealabel { font-family: var(--util); font-size: 17px; font-weight: 500; letter-spacing: 0.3em; fill: var(--agua); opacity: 0.65; } .places { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); } .places li { border-bottom: 1px solid var(--line); padding-block: 0.9rem; display: flex; align-items: baseline; gap: 0.75rem; font-family: var(--util); font-size: 1.125rem; letter-spacing: 0.05em; color: var(--ink); } .places li::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--albero); transform: translateY(-2px); } .places li i { font-style: normal; font-family: var(--body); font-size: 1rem; letter-spacing: 0; color: var(--ink-2); } @media (min-width: 700px) { .places { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); } } /* -------------------------------------------------------------------------- 14. Bloques de contacto y FAQ -------------------------------------------------------------------------- */ .callout { background: var(--cal-alta); border: 1px solid var(--linea); border-left: 4px solid var(--albero); border-radius: var(--r); padding: clamp(1.25rem, 1rem + 1.4vw, 2rem); } .contact-card { background: var(--cal-alta); border: 1px solid var(--linea); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem); } .contact-card .h2 { margin-bottom: var(--sp-4); } .contact-card__number { display: block; font-family: var(--display); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); font-weight: 700; letter-spacing: 0.01em; color: var(--sombra); text-decoration: none; margin-block: var(--sp-4) var(--sp-2); } .contact-card__number:hover { color: var(--agua); } .contact-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; border-top: 1px solid var(--linea); } .contact-list li { border-bottom: 1px solid var(--linea); padding-block: var(--sp-4); display: grid; gap: 0.15rem 1rem; } .contact-list dt, .contact-list .k { font-family: var(--util); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; color: var(--ramaje); } .contact-list .v { font-size: 1.125rem; } .contact-list .v a { color: var(--agua); text-underline-offset: 4px; word-break: break-word; } @media (min-width: 620px) { .contact-list li { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; } } .faq { list-style: none; margin: 0; padding: 0; } .faq__item { padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-top: 1px solid var(--line); } .faq__q { font-family: var(--display); font-size: var(--t-h3); font-weight: 700; line-height: 1.25; margin: 0 0 0.5rem; } .faq__a { color: var(--ink-2); max-width: 62ch; margin: 0; } /* -------------------------------------------------------------------------- 15. Servicios: índice y fichas -------------------------------------------------------------------------- */ .index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .index-list li { border-bottom: 1px solid var(--line); } .index-list a { display: flex; align-items: center; gap: var(--sp-4); padding-block: 0.95rem; color: var(--ink); text-decoration: none; font-family: var(--util); font-size: 1.1875rem; letter-spacing: 0.04em; } .index-list a .ix-ico { width: 28px; height: 28px; flex: none; color: var(--albero); } .index-list a .ix-ico path, .index-list a .ix-ico circle { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .index-list a .ix-go { margin-left: auto; font-family: var(--body); font-size: 1.4rem; line-height: 1; color: var(--albero); transition: transform var(--d-1) var(--ease); } .index-list a:hover { color: var(--albero); } .index-list a:hover .ix-go { transform: translateX(4px); } .service { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); border-top: 1px solid var(--line); scroll-margin-top: 130px; } .service:first-of-type { border-top: 0; } .service__ico { width: 44px; height: 44px; color: var(--agua); margin-bottom: var(--sp-4); } .service__ico path, .service__ico circle { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .service .h2 { margin-bottom: var(--sp-4); } .includes { list-style: none; margin: var(--sp-5) 0 0; padding: 0; } .includes li { position: relative; padding-left: 1.7rem; margin-bottom: 0.55rem; color: var(--ink-2); } .includes li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--agua); } .includes__title { font-family: var(--util); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; color: var(--ramaje); margin: 0 0 var(--sp-3); } /* -------------------------------------------------------------------------- 16. Banda de llamada a la acción -------------------------------------------------------------------------- */ .cta-band { border-radius: var(--r-lg); padding: clamp(2rem, 1.4rem + 3vw, 3.5rem); background: var(--cal-alta); border: 1px solid var(--linea); box-shadow: var(--sh-1); } .cta-band .h2 { margin-bottom: var(--sp-4); max-width: 20ch; } .cta-band .lead { max-width: 52ch; margin-bottom: var(--sp-6); } .cta-band--dark { background: var(--sombra); border-color: rgba(237, 240, 234, 0.14); } /* -------------------------------------------------------------------------- 17. Pie -------------------------------------------------------------------------- */ .site-footer { background: var(--sombra); color: var(--cal); padding-block: clamp(3rem, 2rem + 4vw, 4.5rem) var(--sp-6); margin-top: var(--sec-y); } .site-footer__top { display: grid; gap: var(--sp-7); padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(237, 240, 234, 0.16); } @media (min-width: 780px) { .site-footer__top { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-6); } } .site-footer .brand { color: var(--cal); } .site-footer .brand__over { color: var(--albero); } .footer-blurb { margin-top: var(--sp-4); color: #C3CFC5; max-width: 30ch; } .footer-col h2 { font-family: var(--util); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.12em; color: var(--albero); margin: 0 0 var(--sp-4); } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 0.35rem; } .footer-col a, .footer-col span { color: var(--cal); text-decoration: none; display: inline-block; padding-block: 0.3rem; font-size: 1.0625rem; } .footer-col a { text-decoration: underline; text-decoration-color: rgba(237, 240, 234, 0.35); text-underline-offset: 4px; } .footer-col a:hover { text-decoration-color: var(--albero); color: #FFFFFF; } .footer-col .muted { color: #C3CFC5; } .site-footer__bottom { padding-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; font-family: var(--util); font-size: 0.9375rem; letter-spacing: 0.05em; color: #C3CFC5; } /* -------------------------------------------------------------------------- 18. Movimiento — todo apagado sin JS y con prefers-reduced-motion -------------------------------------------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease); } .js [data-reveal].is-in { opacity: 1; transform: none; } .js .drip[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.15s var(--ease); } .js .drip[data-reveal].is-in { clip-path: inset(0 0 0 0); } .js [data-reveal] .year__cell.on::after { transform: scaleX(0); transition: transform var(--d-2) var(--ease); transition-delay: calc(var(--rd, 0ms) + var(--cd, 0ms)); } .js [data-reveal].is-in .year__cell.on::after { transform: scaleX(1); } .year__row:nth-child(1) { --rd: 0ms; } .year__row:nth-child(2) { --rd: 140ms; } .year__row:nth-child(3) { --rd: 280ms; } .year__row:nth-child(4) { --rd: 420ms; } .year__cell:nth-child(1) { --cd: 0ms; } .year__cell:nth-child(2) { --cd: 38ms; } .year__cell:nth-child(3) { --cd: 76ms; } .year__cell:nth-child(4) { --cd: 114ms; } .year__cell:nth-child(5) { --cd: 152ms; } .year__cell:nth-child(6) { --cd: 190ms; } .year__cell:nth-child(7) { --cd: 228ms; } .year__cell:nth-child(8) { --cd: 266ms; } .year__cell:nth-child(9) { --cd: 304ms; } .year__cell:nth-child(10) { --cd: 342ms; } .year__cell:nth-child(11) { --cd: 380ms; } .year__cell:nth-child(12) { --cd: 418ms; } .js .hero [data-seq], .js .page-hero [data-seq] { opacity: 0; transform: translateY(14px); animation: seq-in 750ms var(--ease) forwards; animation-delay: calc(var(--seq, 0) * 95ms + 130ms); } @keyframes seq-in { to { opacity: 1; transform: none; } } .js .fronds { opacity: 0; animation: fronds-in 1800ms var(--ease) 200ms forwards; } @keyframes fronds-in { to { opacity: 1; } } .fronds__drift { transform-origin: 88% 8%; animation: drift 34s ease-in-out infinite alternate; } @keyframes drift { from { transform: rotate(-0.6deg) translateY(0); } to { transform: rotate(1.1deg) translateY(10px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .js .hero [data-seq], .js .page-hero [data-seq] { opacity: 1; transform: none; animation: none; } .js .fronds { opacity: 1; animation: none; } .fronds__drift { animation: none; } .js [data-reveal] { opacity: 1; transform: none; } .js .drip[data-reveal] { clip-path: none; } .js [data-reveal] .year__cell.on::after { transform: scaleX(1); } } /* -------------------------------------------------------------------------- 19. Ajustes por ancho -------------------------------------------------------------------------- */ @media (max-width: 719px) { .map { display: none; } } @media (max-width: 859px) { .site-header__bar { flex-wrap: wrap; row-gap: 0; padding-block: 0.45rem 0; } .site-header__actions { order: 2; } .site-nav { order: 3; width: 100%; border-top: 1px solid var(--linea); margin-top: 0.45rem; } .site-nav ul { justify-content: space-between; gap: 0; } .site-nav li { flex: 1; } .site-nav a { padding: 0.55rem 0.4rem; font-size: 1.0625rem; text-align: center; } .site-nav a::after { left: 0.4rem; right: 0.4rem; bottom: 0.2rem; } .brand__name { font-size: 1.1rem; } .brand__mark { width: 26px; height: 26px; } .service { scroll-margin-top: 120px; } } @media (max-width: 420px) { .btn { font-size: 1rem; padding-inline: 1.1rem; } .card-pin { transform: none; } }