/* ============================================================= GRUPO SINERGIA — hoja de estilos única 1. Tokens · 2. Reset · 3. Utilidades · 4. Tipografía 5. Componentes · 6. Secciones · 7. Páginas de área 8. Efectos · 9. Responsive · 10. Reduced-motion ============================================================= */ /* ============================================================= 1. TOKENS ------------------------------------------------------------- La web viene con la paleta MARRÓN puesta. Para volver a la paleta verde oliva, en index.html (y en las páginas de areas/) cambiá: por: ============================================================= */ :root { /* Superficies */ --bg: #F4EDE2; /* arena — fondo general */ --bg-2: #E9DDCB; /* arena media — bloques */ --bg-3: #DCCDB6; /* arena profunda */ --paper: #FDFAF4; /* tarjetas */ /* Tintas */ --ink: #2B221A; /* marrón casi negro — texto principal */ --brand: #4A3A2B; /* MARRÓN principal de marca */ --brand-deep: #382B20; /* marrón oscuro — pie y fondos */ --brand-rgb: 74, 58, 43; --tan: #C3A47B; /* camel — secundario */ --tan-deep: #8A6A44; --terracotta: #94522D; /* terracota — tercer acento */ --clay: #6F5B3F; /* tierra — textos de apoyo */ --gold: #B4894C; /* dorado del logo — SOLO decorativo */ --gold-ink: #7F5A2B; /* bronce — el dorado cuando es texto (AA) */ --gold-soft: #D9B583; /* dorado claro — sobre fondos oscuros */ --mute: #665849; /* texto secundario */ --cream-rgb: 244, 237, 226; --line: rgba(var(--brand-rgb), .16); --line-soft: rgba(var(--brand-rgb), .09); /* Tipografías */ --display: "Jost", "Century Gothic", "Segoe UI", system-ui, sans-serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* Ritmo */ --gutter: 1.4rem; --maxw: 1240px; --maxw-narrow: 820px; --section-y: clamp(4.5rem, 9vw, 8.5rem); --radius: 3px; --radius-lg: 6px; /* Curvas */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.25, .46, .45, .94); } /* ---- Paleta alternativa: verde oliva (la primera versión) ---- */ :root[data-tema="oliva"] { --bg: #F5F0E6; --bg-2: #EDE5D6; --bg-3: #E4DACA; --paper: #FDFBF7; --ink: #262E28; --brand: #38453C; --brand-deep: #2C362F; --brand-rgb: 56, 69, 60; --tan: #839887; --tan-deep: #5F7566; --terracotta: #8A6630; --clay: #6F5B3F; --gold: #B4894C; --gold-ink: #7F5A2B; --gold-soft: #D6B27C; --mute: #5C6660; --cream-rgb: 245, 240, 230; } /* ============================================================= 2. RESET & BASE ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { -webkit-text-size-adjust: 100%; tab-size: 2; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 96px; } body { font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; overscroll-behavior-y: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } p { text-wrap: pretty; } /* El cliente no quiere cursivas en ningún lado. e se usan solo como marcadores semánticos. */ em, i { font-style: normal; } ::selection { background: var(--brand); color: var(--bg); } :focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 2px; } /* Transición suave entre páginas (navegadores que la soportan) */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } /* ============================================================= 3. UTILIDADES ============================================================= */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .container-narrow { max-width: var(--maxw-narrow); } .section { padding-block: var(--section-y); } .skip-link { position: fixed; top: -120px; left: 1rem; z-index: 999; padding: .7rem 1.1rem; background: var(--brand); color: var(--bg); border-radius: var(--radius); font-size: .9rem; font-weight: 500; transition: top .25s var(--ease-out); } .skip-link:focus { top: 1rem; } /* ============================================================= 4. TIPOGRAFÍA ------------------------------------------------------------- Títulos: Jost liviana (300), MAYÚSCULA y bien espaciada. Los textos chicos en mayúscula van en 500: a 11px un peso 300 se desvanece en pantalla. Textos corridos: Inter, caja normal, para que se lean cómodos. ============================================================= */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 300; text-transform: uppercase; line-height: 1.14; letter-spacing: .035em; text-wrap: balance; color: var(--brand); } .kicker { display: flex; align-items: center; gap: .7rem; font-family: var(--display); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--clay); } .kicker .num { font-variant-numeric: tabular-nums; color: var(--gold-ink); padding-right: .7rem; border-right: 1px solid var(--line); } .section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-title { margin-top: 1.1rem; font-size: clamp(1.6rem, 3.5vw, 2.7rem); } .section-title em { color: var(--gold-ink); } .section-lede { margin-top: 1.4rem; max-width: 44rem; font-size: clamp(1.02rem, 1.6vw, 1.14rem); font-weight: 300; color: var(--mute); } /* ============================================================= 5. COMPONENTES ============================================================= */ /* ---- Botones ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.7rem; border-radius: 999px; font-family: var(--display); font-size: .8rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; text-align: center; white-space: nowrap; transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out); } .btn-primary { background: var(--brand); color: var(--bg); box-shadow: 0 1px 0 rgba(var(--brand-rgb), .2); } .btn-ghost { border: 1px solid var(--line); color: var(--brand); } .btn-sm { padding: .68rem 1.25rem; font-size: .72rem; } .btn-block { width: 100%; } @media (hover: hover) { .btn-primary:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(var(--brand-rgb), .65); } .btn-ghost:hover { border-color: var(--brand); background: rgba(var(--brand-rgb), .05); transform: translateY(-2px); } } .btn:active { transform: translateY(0); } /* ---- Etiquetas de disciplina ---- */ .tag { display: inline-block; padding: .32rem .7rem; border-radius: 999px; font-family: var(--display); font-size: .64rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; line-height: 1.4; } .tag-legal { background: var(--brand); color: var(--bg); } .tag-contable { background: var(--tan); color: var(--ink); } .tag-integral { background: var(--terracotta); color: var(--bg); } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; } .dot-legal { background: var(--brand); } .dot-contable { background: var(--tan); } .dot-integral { background: var(--terracotta); } /* ---- Campos de formulario ---- */ .field { display: block; margin-bottom: 1.05rem; } .field > span { display: block; margin-bottom: .4rem; font-family: var(--display); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .field > span i { text-transform: none; letter-spacing: 0; font-weight: 400; } .field input, .field select, .field textarea { width: 100%; padding: .8rem .95rem; font-family: var(--sans); font-size: .95rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); } .field textarea { resize: vertical; min-height: 84px; } .field input::placeholder, .field textarea::placeholder { color: #857B6E; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--tan-deep); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .16); } .field input:user-invalid, .field textarea:user-invalid { border-color: #A2543F; } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; } /* ============================================================= 6. SECCIONES ============================================================= */ /* ---- 6.1 NAV ---- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; border-bottom: 1px solid transparent; transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out); } .nav.is-stuck { background: rgba(var(--cream-rgb), .9); border-bottom-color: var(--line-soft); box-shadow: 0 10px 30px -26px rgba(var(--brand-rgb), .7); } @supports (backdrop-filter: blur(14px)) { .nav.is-stuck { background: rgba(var(--cream-rgb), .74); backdrop-filter: blur(14px) saturate(140%); } } .nav-inner { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: .8rem var(--gutter); } .nav-brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; } .nav-brand img { width: 42px; height: 42px; object-fit: contain; } .nav-brand-text { display: flex; flex-direction: column; line-height: 1.2; } .nav-brand-name { font-family: var(--display); font-size: .94rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--brand); } .nav-brand-sub { font-family: var(--display); font-size: .58rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--clay); } .nav-links { display: none; } .nav-links a { position: relative; font-family: var(--display); font-size: .76rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); padding-block: .25rem; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); } @media (hover: hover) { .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } } .nav-links a.is-current { color: var(--brand); } .nav-links a.is-current::after { transform: scaleX(1); } .nav-actions { display: flex; align-items: center; gap: .6rem; } .nav-actions .btn-primary { display: none; } .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; } .nav-toggle span { display: block; height: 1.8px; width: 100%; background: var(--brand); transition: transform .35s var(--ease-out), opacity .25s var(--ease-out); } .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.4px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.4px) rotate(-45deg); } body.nav-open { overflow: hidden; } .nav-links.is-open { display: flex; flex-direction: column; gap: .2rem; position: fixed; inset: 66px 0 auto 0; padding: 1.4rem var(--gutter) 2rem; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -30px rgba(var(--brand-rgb), .8); } .nav-links.is-open a { padding-block: .95rem; font-size: 1.15rem; letter-spacing: .06em; color: var(--brand); border-bottom: 1px solid var(--line-soft); } .nav-links.is-open a::after { display: none; } /* ---- 6.2 HERO ---- */ .hero { position: relative; padding-top: clamp(7rem, 15vw, 9.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); } .hero::before { content: ""; position: absolute; inset: 0 0 38% 0; background: linear-gradient(180deg, var(--bg-2) 0%, rgba(var(--cream-rgb), 0) 100%); z-index: -1; } .hero-grid { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: clamp(2.5rem, 5vw, 4rem); } .hero-title { margin-top: 1.4rem; /* Medido en mayúscula: el renglón más largo entra con margen en todos los anchos a partir de 720px. */ font-size: clamp(1.7rem, 3.45vw, 2.7rem); line-height: 1.16; letter-spacing: .04em; } /* En celular anulamos los cortes de línea fijos y dejamos que el texto se acomode solo: entra más grande y queda parejo. */ @media (max-width: 719px) { .hero-title br { display: none; } } .hero-title em { color: var(--gold-ink); } .hero-sub { margin-top: 1.6rem; max-width: 34rem; font-size: clamp(1.02rem, 1.7vw, 1.16rem); font-weight: 300; color: var(--mute); } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.1rem; } .hero-meta { display: grid; gap: 1.1rem; margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } .hero-meta dt { font-family: var(--display); font-size: .64rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--clay); margin-bottom: .2rem; } .hero-meta dd { font-size: .92rem; color: var(--ink); } .hero-meta a { display: inline-block; padding-block: .16rem; border-bottom: 1px solid var(--line); transition: border-color .3s var(--ease-out), color .3s var(--ease-out); } @media (hover: hover) { .hero-meta a:hover { color: var(--gold-ink); border-color: var(--gold); } } .hero-figure { position: relative; } .hero-figure::before { content: ""; position: absolute; inset: auto -14px -14px auto; width: 62%; height: 55%; background: var(--bg-3); border-radius: var(--radius-lg); z-index: -1; } .hero-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: var(--radius-lg); } .hero-badge { display: flex; align-items: center; gap: .85rem; position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); width: max-content; max-width: 92%; padding: .7rem 1.2rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 18px 34px -26px rgba(var(--brand-rgb), .75); font-size: .72rem; color: var(--mute); white-space: nowrap; } .hero-badge strong { display: block; font-family: var(--display); font-size: .86rem; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); line-height: 1.3; } .hero-badge-plus { color: var(--gold-ink); font-size: 1.1rem; } /* ---- 6.3 MARQUEE ---- */ .marquee { overflow: hidden; padding-block: 1.05rem; margin-top: 2.5rem; border-block: 1px solid var(--line); background: var(--bg-2); user-select: none; } .marquee-track { display: flex; width: max-content; animation: marqueeSlide 52s linear infinite; } .marquee-group { display: flex; flex-shrink: 0; } .marquee-group i { display: flex; align-items: center; padding-inline: 1.5rem; font-family: var(--display); font-size: .88rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); white-space: nowrap; } .marquee-group i::after { content: "·"; margin-left: 1.5rem; color: var(--gold); } @keyframes marqueeSlide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ---- 6.4 SINERGIA ---- */ .compare { display: grid; gap: 1.1rem; align-items: stretch; } .compare-card { padding: clamp(1.6rem, 3vw, 2.3rem); border-radius: var(--radius-lg); border: 1px solid var(--line); } .compare-after { background: var(--brand); border-color: var(--brand); } .compare-tag { margin-bottom: 1.3rem; font-family: var(--display); font-size: .66rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--clay); } .compare-after .compare-tag { color: var(--gold-soft); } .compare-list li { position: relative; padding-left: 1.5rem; padding-block: .55rem; font-size: .96rem; font-weight: 300; color: var(--mute); border-bottom: 1px solid var(--line-soft); } .compare-list li:last-child { border-bottom: 0; padding-bottom: 0; } .compare-list li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 7px; height: 1px; background: var(--clay); } .compare-after .compare-list li { color: rgba(var(--cream-rgb), .88); border-bottom-color: rgba(var(--cream-rgb), .14); } .compare-after .compare-list li::before { background: var(--gold-soft); width: 10px; } .compare-arrow { display: flex; align-items: center; justify-content: center; padding-block: .3rem; } .compare-arrow span { display: block; width: 1px; height: 34px; background: linear-gradient(180deg, var(--line), var(--gold)); position: relative; } .compare-arrow span::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 6px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: translateX(-50%) rotate(45deg); } .sinergia-figure { margin-top: clamp(2.8rem, 5vw, 4.5rem); } .sinergia-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius-lg); /* La foto original tiene luz magenta: monocromo cálido para que entre en la paleta arena/marrón. */ filter: grayscale(1) contrast(1.04) brightness(1.02) sepia(.22); } .sinergia-figure figcaption { margin-top: 1.1rem; font-family: var(--display); font-size: clamp(.95rem, 1.7vw, 1.15rem); font-weight: 400; letter-spacing: .08em; color: var(--brand); text-align: center; } .sinergia-figure figcaption em { color: var(--gold-ink); text-transform: uppercase; } /* ---- 6.5 NOSOTRAS ---- */ .nosotras { background: var(--bg-2); } .team { display: grid; gap: clamp(1.4rem, 3vw, 2rem); } .team-card { display: grid; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); will-change: transform; } .team-photo { overflow: hidden; background: var(--bg-3); } .team-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; transition: transform .8s var(--ease-out), filter .8s var(--ease-out); } .team-body { padding: clamp(1.4rem, 3vw, 2.1rem); } .team-name { margin-top: .9rem; font-size: clamp(1.5rem, 2.7vw, 2rem); letter-spacing: .1em; } .team-role { margin-top: .3rem; font-family: var(--display); font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--clay); } .team-text { margin-top: 1.1rem; font-size: .96rem; font-weight: 300; color: var(--mute); } @media (hover: hover) { .team-card:hover { box-shadow: 0 34px 60px -42px rgba(var(--brand-rgb), .75); } .team-card:hover .team-photo img { transform: scale(1.05); filter: saturate(1.08); } } /* ---- 6.6 ÁREAS ---- */ .filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); } .filter { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.05rem; border: 1px solid var(--line); border-radius: 999px; font-family: var(--display); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out); } .filter-count { font-size: .68rem; font-variant-numeric: tabular-nums; } @media (hover: hover) { .filter:hover { border-color: var(--tan-deep); color: var(--brand); } } .filter.is-active { background: var(--brand); border-color: var(--brand); color: var(--bg); } .filter.is-active .filter-count { opacity: .78; } .areas-grid { display: grid; gap: 1rem; } .area { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 2.8vw, 2.1rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); color: inherit; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out); } .area::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 3px; background: var(--gold); border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out); } @media (hover: hover) { .area:hover { transform: translateY(-4px); border-color: rgba(var(--brand-rgb), .24); box-shadow: 0 30px 50px -40px rgba(var(--brand-rgb), .8); } .area:hover::before { transform: scaleX(1); } .area:hover .area-link { color: var(--gold-ink); } .area:hover .area-link::after { transform: translateX(4px); } } .area-num { font-family: var(--display); font-size: .95rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .12em; color: var(--gold-ink); margin-bottom: .9rem; } .area .tag { align-self: flex-start; } .area-title { margin-top: .85rem; font-size: clamp(1.02rem, 1.55vw, 1.2rem); font-weight: 400; line-height: 1.3; letter-spacing: .07em; } .area-text { margin-top: .75rem; font-size: .94rem; font-weight: 300; color: var(--mute); } .area-note { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); font-family: var(--display); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); } .area-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1.3rem; font-family: var(--display); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); transition: color .35s var(--ease-out); } .area-link::after { content: "→"; transition: transform .35s var(--ease-out); } .area-featured { background: var(--bg-2); border-color: rgba(var(--brand-rgb), .2); } .area-featured .area-title { font-size: clamp(1.2rem, 2vw, 1.5rem); } .area.is-hidden { display: none; } .areas-empty { margin-top: 2rem; text-align: center; color: var(--mute); } /* ---- Tarjeta de cierre de la grilla (no es un área) ---- Completa la última fila y suma un punto de contacto. Va en marrón para que se lea como algo distinto de las tarjetas de área. */ .area-cta { /* Termina siempre en la última columna. Al no fijarle el inicio, ocupa exactamente el hueco que queda en la fila: 1 columna si sobra una, la fila entera si arranca sola. Sirve para cualquier filtro. */ grid-column-end: -1; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.6rem, 3vw, 2.3rem); background: var(--brand); border: 1px solid var(--brand); border-radius: var(--radius-lg); color: var(--bg); transition: transform .45s var(--ease-out), background-color .45s var(--ease-out), box-shadow .45s var(--ease-out); } .area-cta-kicker { font-family: var(--display); font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); } .area-cta-title { margin-top: .85rem; font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 400; letter-spacing: .07em; color: var(--bg); } .area-cta-text { margin-top: .75rem; max-width: 44ch; font-size: .94rem; font-weight: 300; color: rgba(var(--cream-rgb), .84); } .area-cta-btn { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.5rem; font-family: var(--display); font-size: .72rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-soft); } .area-cta-btn::after { content: "→"; transition: transform .35s var(--ease-out); } @media (hover: hover) { .area-cta:hover { transform: translateY(-4px); background: var(--brand-deep); box-shadow: 0 30px 50px -40px rgba(var(--brand-rgb), .9); } .area-cta:hover .area-cta-btn::after { transform: translateX(4px); } } /* ---- 6.7 MÉTODO ---- */ .metodo-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); } .metodo-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius-lg); } .steps { position: relative; padding-left: 3.6rem; } .steps-rail { position: absolute; left: 17px; top: 8px; bottom: 8px; width: 1px; background: var(--line); } .steps-rail-fill { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--gold), var(--tan-deep)); transform: scaleY(0); transform-origin: top; } .step { position: relative; padding-bottom: clamp(2rem, 4vw, 3rem); } .step:last-child { padding-bottom: 0; } .step-num { position: absolute; left: -3.6rem; top: -2px; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background: var(--bg); border: 1px solid var(--line); border-radius: 50%; font-family: var(--display); font-size: .9rem; font-weight: 400; color: var(--brand); } .step.is-visible .step-num { border-color: var(--gold); color: var(--gold-ink); } .step-title { font-size: clamp(1.02rem, 1.8vw, 1.3rem); font-weight: 400; letter-spacing: .07em; } .step-text { margin-top: .6rem; font-size: .96rem; font-weight: 300; color: var(--mute); max-width: 34rem; } /* ---- 6.8 FAQ ---- */ .faq { background: var(--bg-2); } .faq-list { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } /* Las preguntas van en caja normal a propósito: una pregunta larga toda en mayúscula se vuelve difícil de leer. */ .faq-item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding-block: 1.4rem; cursor: pointer; list-style: none; font-family: var(--display); font-size: clamp(1.02rem, 1.85vw, 1.24rem); font-weight: 400; line-height: 1.4; letter-spacing: .01em; color: var(--brand); transition: color .3s var(--ease-out); } .faq-item summary::-webkit-details-marker { display: none; } @media (hover: hover) { .faq-item summary:hover { color: var(--gold-ink); } } .faq-icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin-top: .35rem; } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--gold); transform: translate(-50%, -50%); transition: transform .4s var(--ease-out), opacity .3s var(--ease-out); } .faq-icon::before { width: 15px; height: 2px; } .faq-icon::after { width: 2px; height: 15px; } .faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq-body { padding-bottom: 1.6rem; max-width: 48rem; } .faq-body p { font-size: .98rem; font-weight: 300; color: var(--mute); } .faq-body p + p { margin-top: .9rem; } .faq-body em { color: var(--brand); font-weight: 500; } .faq-item[open] .faq-body { animation: faqIn .45s var(--ease-out) both; } @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ---- 6.9 CTA / CONTACTO ---- */ .cta { position: relative; padding-block: var(--section-y); background: var(--brand); color: var(--bg); overflow: hidden; } .cta-bg { position: absolute; inset: 0; z-index: 0; } .cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; /* Neutraliza la luz magenta del original y la funde con el marrón */ filter: grayscale(1) contrast(1.08) brightness(.62) sepia(.3); opacity: .32; } .cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--brand-rgb), .9) 0%, rgba(var(--brand-rgb), .97) 100%); } .cta-inner { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 5vw, 4rem); } .cta-compacta { padding-block: clamp(3.5rem, 7vw, 6rem); } .cta .kicker { color: var(--gold-soft); } .cta .section-title { color: var(--bg); } .cta .section-lede { color: rgba(var(--cream-rgb), .78); } .cta .btn-primary { background: var(--bg); color: var(--brand); } @media (hover: hover) { .cta .btn-primary:hover { background: var(--gold-soft); color: var(--brand-deep); } } .cta-data { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(var(--cream-rgb), .18); display: grid; gap: .85rem; } .cta-data li { font-size: .93rem; color: rgba(var(--cream-rgb), .9); } .cta-data span { display: block; font-family: var(--display); font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: .12rem; } .cta-data a { display: inline-block; padding-block: .16rem; border-bottom: 1px solid rgba(217, 181, 131, .5); } .cta-form { padding: clamp(1.5rem, 3.4vw, 2.4rem); background: var(--bg); border-radius: var(--radius-lg); box-shadow: 0 40px 70px -50px rgba(0, 0, 0, .9); } .cta-form-title { margin-bottom: 1.5rem; font-family: var(--display); font-size: 1.1rem; font-weight: 400; text-transform: uppercase; letter-spacing: .09em; color: var(--brand); } .cta-form .btn-primary { background: var(--brand); color: var(--bg); } @media (hover: hover) { .cta-form .btn-primary:hover { background: var(--brand-deep); color: var(--bg); } } .cta-form-note { margin-top: .9rem; font-size: .78rem; color: var(--mute); text-align: center; } .cta-form.is-sent .btn-primary { background: var(--tan-deep); } /* ---- 6.10 FOOTER ---- */ .footer { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: 2rem; background: var(--brand-deep); color: rgba(var(--cream-rgb), .74); font-size: .9rem; } .footer-inner { display: grid; gap: 2.5rem; } .footer-brand img { width: 60px; height: 60px; object-fit: contain; margin-bottom: .9rem; } .footer-name { font-family: var(--display); font-size: 1.1rem; font-weight: 400; text-transform: uppercase; letter-spacing: .14em; color: var(--bg); line-height: 1.3; } .footer-sub { font-family: var(--display); font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); margin-top: .3rem; } .footer-nav { display: grid; gap: .35rem; align-content: start; } .footer-nav a { display: inline-block; padding-block: .22rem; transition: color .3s var(--ease-out); } @media (hover: hover) { .footer-nav a:hover { color: var(--gold-soft); } } .footer-label { font-family: var(--display); font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: .6rem; } .footer-contact p { margin-bottom: .2rem; } .footer-contact a { display: inline-block; padding-block: .22rem; border-bottom: 1px solid rgba(var(--cream-rgb), .25); } @media (hover: hover) { .footer-contact a:hover { color: var(--gold-soft); border-color: var(--gold-soft); } } .footer-hours { opacity: .85; } .footer-credito { color: rgba(var(--cream-rgb), .62); } .footer-credito a { display: inline-block; padding-block: .22rem; border-bottom: 1px solid rgba(var(--cream-rgb), .3); transition: color .3s var(--ease-out), border-color .3s var(--ease-out); } @media (hover: hover) { .footer-credito a:hover { color: var(--gold-soft); border-color: var(--gold-soft); } } .footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid rgba(var(--cream-rgb), .14); font-size: .78rem; opacity: .82; } /* ============================================================= 7. PÁGINAS DE ÁREA ============================================================= */ .area-hero { padding-top: clamp(6.5rem, 13vw, 9rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); background: var(--bg-2); border-bottom: 1px solid var(--line); } .migas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 2rem; font-family: var(--display); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .migas a { display: inline-block; padding-block: .22rem; border-bottom: 1px solid var(--line); } @media (hover: hover) { .migas a:hover { color: var(--brand); border-color: var(--gold); } } .migas span { color: var(--tan-deep); } .area-hero .tag { margin-top: 1.1rem; } .area-hero-title { margin-top: 1rem; font-size: clamp(1.7rem, 4.1vw, 2.9rem); letter-spacing: .04em; } .area-hero-intro { margin-top: 1.5rem; max-width: 42rem; font-size: clamp(1.02rem, 1.7vw, 1.18rem); font-weight: 300; color: var(--mute); } .detalle-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); } .detalle-title { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 400; letter-spacing: .08em; padding-bottom: 1.1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line); } .lista-check li, .lista-casos li { position: relative; padding-left: 1.9rem; padding-block: .7rem; font-size: .97rem; font-weight: 300; color: var(--mute); border-bottom: 1px solid var(--line-soft); } .lista-check li:last-child, .lista-casos li:last-child { border-bottom: 0; } .lista-check li::before { content: ""; position: absolute; left: 2px; top: 1.2rem; width: 9px; height: 5px; border-left: 1.8px solid var(--gold-ink); border-bottom: 1.8px solid var(--gold-ink); transform: rotate(-45deg); } .lista-casos li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 11px; height: 1.8px; background: var(--tan-deep); } .detalle-nota { margin-top: 1.6rem; padding: 1.1rem 1.3rem; background: var(--bg-2); border-left: 2px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; font-size: .92rem; font-weight: 300; color: var(--mute); } .otras { background: var(--bg-2); padding-block: clamp(3rem, 6vw, 5rem); } .otras-title { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 400; letter-spacing: .08em; margin-bottom: 1.8rem; } .otras-grid { display: grid; gap: .6rem; } /* Apilado en todos los anchos: el título + la etiqueta en una sola fila se desbordaban en las tarjetas angostas. */ .otra { display: grid; grid-template-columns: 1fr; align-items: start; gap: .5rem; padding: 1rem 1.2rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out); } .otra-num { font-family: var(--display); font-size: .8rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .12em; color: var(--gold-ink); } .otra-title { font-family: var(--display); font-size: .82rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); line-height: 1.45; } .otra .tag { justify-self: start; } @media (hover: hover) { .otra:hover { transform: translateX(3px); border-color: rgba(var(--brand-rgb), .24); box-shadow: 0 18px 34px -30px rgba(var(--brand-rgb), .8); } } /* ---- 7.1 PLANES DE ABONO (solo en la página de asesoramiento) ---- */ .planes { background: var(--bg); } .planes-head { max-width: 42rem; } .planes-grid { display: grid; gap: 1.1rem; } .plan { position: relative; display: flex; flex-direction: column; padding: clamp(1.6rem, 3vw, 2.2rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); } .plan:nth-child(2) { background: var(--bg-2); border-color: rgba(var(--brand-rgb), .2); } .plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; } .plan-eyebrow { font-family: var(--display); font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--clay); padding-top: .3rem; } .plan-badge { flex: 0 1 auto; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-family: var(--display); font-size: .58rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; line-height: 1.5; color: var(--clay); text-align: center; } .plan-nombre { font-size: clamp(1.3rem, 2.3vw, 1.7rem); letter-spacing: .09em; } .plan-tagline { margin-top: .55rem; font-family: var(--display); font-size: .78rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-ink); } .plan-para { margin-top: .7rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line-soft); font-size: .92rem; font-weight: 300; color: var(--mute); } .plan-lista { margin-top: 1.2rem; margin-bottom: 1.9rem; } .plan-lista li { position: relative; padding-left: 1.7rem; padding-block: .5rem; font-size: .92rem; font-weight: 300; color: var(--mute); } .plan-lista li::before { content: ""; position: absolute; left: 2px; top: 1rem; width: 9px; height: 5px; border-left: 1.8px solid var(--gold-ink); border-bottom: 1.8px solid var(--gold-ink); transform: rotate(-45deg); } /* El botón se va al fondo de la tarjeta. Como las tres tarjetas tienen la misma altura (la grilla las estira), los tres botones quedan alineados aunque cada plan tenga distinta cantidad de beneficios. Ojo: no agregar acá una regla más específica con margin-top fijo, porque pisa el `auto` y se pierde la alineación. */ .plan-btn { margin-top: auto; } /* Tarjeta destacada — la tercera, en marrón */ .plan-destacado { background: var(--brand); border-color: var(--brand); color: var(--bg); } .plan-destacado .plan-eyebrow { color: var(--gold-soft); } .plan-destacado .plan-badge { border-color: rgba(var(--cream-rgb), .35); color: var(--gold-soft); } .plan-destacado .plan-nombre { color: var(--bg); } .plan-destacado .plan-tagline { color: var(--gold-soft); } .plan-destacado .plan-para { color: rgba(var(--cream-rgb), .82); border-bottom-color: rgba(var(--cream-rgb), .18); } .plan-destacado .plan-lista li { color: rgba(var(--cream-rgb), .86); } .plan-destacado .plan-lista li::before { border-left-color: var(--gold-soft); border-bottom-color: var(--gold-soft); } .plan-destacado .btn-primary { background: var(--bg); color: var(--brand); } @media (hover: hover) { .plan:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -40px rgba(var(--brand-rgb), .8); } .plan-destacado .btn-primary:hover { background: var(--gold-soft); color: var(--brand-deep); } } /* Cuadro de cierre */ .planes-cierre { /* minmax(0,...) + white-space normal: si no, el botón (que es nowrap) estira la grilla y desborda en pantallas angostas. */ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: center; margin-top: clamp(1.6rem, 3vw, 2.4rem); padding: clamp(1.5rem, 3vw, 2.1rem); background: var(--bg-3); border-left: 3px solid var(--gold); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } .planes-cierre-texto { font-size: clamp(1rem, 1.7vw, 1.1rem); font-weight: 300; color: var(--ink); } .planes-cierre .btn { justify-self: start; white-space: normal; } /* Cuando la página tiene un solo bloque de detalle */ .detalle-solo { max-width: 46rem; } /* ============================================================= 8. EFECTOS ============================================================= */ /* Los reveals SOLO se ocultan si el JS está vivo (la clase .js la pone un script inline en el ). Sin JS, todo el contenido se ve de entrada. */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .js .reveal.is-visible { opacity: 1; transform: none; } .js .reveal[data-split] { opacity: 1; transform: none; } /* ============================================================= 9. RESPONSIVE ============================================================= */ @media (min-width: 540px) { .hero-meta { grid-template-columns: repeat(3, auto); justify-content: start; gap: 2.2rem; } .cta-data { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 2rem; } } @media (min-width: 720px) { :root { --gutter: 2rem; } /* 2 columnas: destacada a lo ancho + 9 áreas + cierre = 12 celdas justas */ .areas-grid { grid-template-columns: repeat(2, 1fr); } .areas-grid .area-featured { grid-column: span 2; } /* Con un filtro activo cambia la cantidad de tarjetas: se anulan los anchos dobles para que no queden huecos raros. */ .areas-grid.is-filtered .area { grid-column: auto; } .team { grid-template-columns: repeat(2, 1fr); } .compare { grid-template-columns: 1fr auto 1fr; gap: 1.4rem; } .compare-arrow span { width: 34px; height: 1px; background: linear-gradient(90deg, var(--line), var(--gold)); } .compare-arrow span::after { left: auto; right: 0; bottom: 50%; transform: translateY(50%) rotate(-45deg); } .footer-inner { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; } .metodo-grid { grid-template-columns: 1fr 1.15fr; align-items: start; } .metodo-figure img { aspect-ratio: 3 / 4; } .detalle-grid { grid-template-columns: 1.15fr .85fr; } .detalle-grid.detalle-solo { grid-template-columns: 1fr; } .otras-grid { grid-template-columns: repeat(2, 1fr); } .planes-cierre { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; } } @media (min-width: 960px) { .nav-toggle { display: none; } .nav-links { display: flex; gap: 1.7rem; margin-right: 1.6rem; } .nav-actions .btn-primary { display: inline-flex; } .nav-brand img { width: 46px; height: 46px; } .hero-grid { grid-template-columns: 1.16fr .84fr; align-items: center; } .hero-figure img { aspect-ratio: 3 / 4; } .hero-badge { left: auto; right: 24px; transform: none; } /* 3 columnas: 12 celdas justas (destacada doble + 9 áreas + cierre) */ .areas-grid { grid-template-columns: repeat(3, 1fr); gap: 1.15rem; } .areas-grid .area-featured { grid-column: span 2; } .cta-inner { grid-template-columns: 1fr .85fr; align-items: center; } .cta-compacta .cta-inner { grid-template-columns: 1fr; } .cta-data { grid-template-columns: 1fr; } .otras-grid { grid-template-columns: repeat(4, 1fr); } .planes-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; } } @media (min-width: 1280px) { :root { --gutter: 2.5rem; } .hero { padding-top: 11rem; } .metodo-grid { grid-template-columns: 1fr 1.2fr; gap: 5rem; } .steps { padding-left: 4.2rem; } .step-num { left: -4.2rem; width: 40px; height: 40px; } .steps-rail { left: 20px; } } /* ============================================================= 10. REDUCED-MOTION Solo se apagan efectos intrusivos (bucles largos). Los hovers, fades y transiciones siguen funcionando: en Windows esta preferencia viene activada de fábrica en muchos equipos y apagarlo todo dejaría la web "muerta". ============================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee-track { animation: none; } .js .reveal { transition-duration: .35s; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }