/* ============================================ VANTICHOR — HERO SECTION ============================================*/ :root { /* --- Colores de marca (oficiales) --- */ --vtc-purple-dark: #2e0e3b; /* fondo principal */ --vtc-black: #1a1a1a; /* texto / contraste */ --vtc-lilac: #d5cadd; /* acentos suaves, bloques resaltados */ --vtc-white: #ffffff; /* texto principal sobre fondo oscuro */ /* --- Derivados internos (solo para profundidad de fondo, no son de marca) --- */ --vtc-purple-deep: #190826; /* --- Tipografía --- */ --font-display: 'Archivo', 'Poppins', 'Montserrat', sans-serif; --font-body: 'Poppins', 'Montserrat', sans-serif; /* --- Espaciado base --- */ --space-unit: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--vtc-purple-dark); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ============================================ ANIMACIONES DE ENTRADA (requiere vantichor-scripts.js) Los elementos [data-reveal] quedan visibles por defecto: solo se ocultan cuando el JS confirma su ejecución (clase .has-js en ), para no depender del JS para mostrar contenido. ============================================ */ .has-js [data-reveal] { opacity: 0; transform: translateY(calc(var(--space-unit) * 3)); transition: opacity 0.6s ease, transform 0.6s ease; } .has-js [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .has-js [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ============================================ HERO — contenedor principal ============================================ */ .hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; /* Degradado radial: simula el efecto de luz central del flyer */ background: radial-gradient(circle at 65% 20%, rgba(213, 202, 221, 0.16), transparent 45%), radial-gradient(circle at 50% 45%, var(--vtc-purple-dark) 0%, var(--vtc-purple-deep) 75%); } .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(to bottom, transparent, #190826); pointer-events: none; z-index: 1; } /* Glow suave adicional detrás del título */ .hero__glow { position: absolute; top: 38%; left: 8%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(213, 202, 221, 0.22) 0%, transparent 70%); filter: blur(10px); pointer-events: none; z-index: 1; } /* Fondo con la flecha quebrada de marca — mismo tratamiento que las piezas de Instagram: grande y recortada por el borde en una esquina, con un eco chico y tenue en la opuesta */ .hero__bg-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .shape { position: absolute; fill: var(--vtc-white); aspect-ratio: 233.04077 / 274.73657; } .shape--1 { top: -8%; right: -12%; width: clamp(260px, 34vw, 460px); opacity: 0.32; transform: rotate(6deg); } .shape--2 { bottom: -6%; left: -10%; width: clamp(140px, 16vw, 200px); opacity: 0.06; transform: rotate(-12deg); } /* ============================================ NAV / MARCA ============================================ */ .hero__nav { position: relative; z-index: 2; padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 4) 0; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--vtc-white); } .brand__mark { width: 28px; height: 28px; fill: var(--vtc-white); } .brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.01em; } .brand__dot { color: var(--vtc-lilac); } /* ============================================ CONTENIDO CENTRAL ============================================ */ .hero__body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--space-unit) * 5); padding: calc(var(--space-unit) * 4); } .hero__content { display: flex; flex-direction: column; max-width: 720px; } /* ============================================ SLIDER — fotografía real del rubro ============================================ */ .hero__slider { position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; align-self: center; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); } .hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(0.85) brightness(0.95); transition: opacity 1.2s ease; } .hero__slide.is-active { opacity: 1; } .hero__slider-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46, 14, 59, 0.1) 0%, rgba(25, 8, 38, 0.65) 100%); pointer-events: none; } .hero__slider-dots { position: absolute; left: 50%; bottom: calc(var(--space-unit) * 2); transform: translateX(-50%); display: flex; gap: 8px; z-index: 1; } .hero__slider-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transition: background-color 0.3s ease, transform 0.3s ease; } .hero__slider-dot.is-active { background: var(--vtc-white); transform: scale(1.3); } @media (min-width: 1000px) { .hero__body { flex-direction: row; align-items: center; justify-content: space-between; gap: calc(var(--space-unit) * 6); } .hero__content { flex: 1; } .hero__slider { flex-shrink: 0; } } /* --- Título con tratamiento "recorte editorial" --- */ .hero__title { font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: var(--vtc-white); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: clamp(2.75rem, 9vw, 4.75rem); margin-bottom: calc(var(--space-unit) * 3); } .hero__title .line { padding-left: 2px; } /* Bloques "highlight" tipo marcador editorial */ .highlight { display: inline-block; padding: 0.05em 0.28em; font-style: italic; line-height: 1.05; } .highlight--white { background: var(--vtc-white); color: var(--vtc-black); } .highlight--lilac { background: var(--vtc-lilac); color: var(--vtc-black); font-style: normal; font-weight: 800; } /* --- Subtítulo --- */ .hero__subtitle { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.05rem, 2.6vw, 1.35rem); color: var(--vtc-white); max-width: 46ch; margin-bottom: calc(var(--space-unit) * 1.5); } /* --- Línea de refuerzo --- */ .hero__support { font-family: var(--font-body); font-weight: 400; font-size: 0.98rem; color: rgba(255, 255, 255, 0.72); max-width: 42ch; margin-bottom: calc(var(--space-unit) * 4.5); } /* ============================================ CTAs — botones tipo "pill" ============================================ */ .hero__cta { display: flex; flex-wrap: wrap; gap: calc(var(--space-unit) * 2); } .hero__subtitle[data-reveal] { transition-delay: 0.1s; } .hero__support[data-reveal] { transition-delay: 0.2s; } .hero__cta[data-reveal] { transition-delay: 0.3s; } .hero__slider[data-reveal] { transition-delay: 0.25s; } .btn { font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; text-decoration: none; padding: 0.95em 1.9em; border-radius: 10px; transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; } .btn--primary { background: var(--vtc-white); color: var(--vtc-black); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .btn--primary:hover, .btn--primary:focus-visible { background: var(--vtc-lilac); transform: translateY(-2px); } .btn--secondary { background: transparent; color: var(--vtc-white); border: 1.5px solid rgba(255, 255, 255, 0.6); } .btn--secondary:hover, .btn--secondary:focus-visible { border-color: var(--vtc-white); background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); } .btn:focus-visible { outline: 2px solid var(--vtc-lilac); outline-offset: 3px; } /* Respeta preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn--primary:hover, .btn--secondary:hover { transform: none; } } /* ============================================ RESPONSIVE — mobile first ya cubierto arriba. Ajustes para pantallas más grandes. ============================================ */ @media (min-width: 768px) { .hero__nav { padding: calc(var(--space-unit) * 5) calc(var(--space-unit) * 7) 0; } .hero__body { padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 7); } .hero__glow { width: 620px; height: 620px; } } @media (min-width: 1200px) { .hero__body { padding-left: calc(var(--space-unit) * 10); } } /* ============================================ VANTICHOR — SERVICIOS SECTION Continuidad visual con el Hero ============================================ */ /* ============================================ SERVICIOS — contenedor principal Fondo --vtc-black: genera separación del Hero (que es --vtc-purple-dark) sin romper la identidad ============================================ */ .servicios { position: relative; overflow: hidden; background: #190826; background-image: linear-gradient( to bottom, transparent 0%, transparent 80%, var(--vtc-black) 100% ); padding: calc(var(--space-unit) * 9) calc(var(--space-unit) * 4); } /* Flecha de fondo, muy tenue — continúa el lenguaje visual del Hero. Contenida dentro de la sección (sin offsets negativos) para que overflow:hidden no la corte en seco contra el borde. */ .servicios__watermark { position: absolute; bottom: 6%; right: -4%; width: clamp(240px, 30vw, 420px); aspect-ratio: 233.04077 / 274.73657; fill: var(--vtc-white); opacity: 0.04; transform: rotate(-8deg); pointer-events: none; z-index: 0; } .servicios__inner { position: relative; z-index: 1; max-width: 1160px; } /* ============================================ ENCABEZADO — alineado a la izquierda, igual que el Hero ============================================ */ .servicios__header { max-width: 640px; margin-bottom: calc(var(--space-unit) * 7); } .servicios__title { font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; color: var(--vtc-white); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: clamp(2rem, 5.5vw, 3rem); margin-bottom: calc(var(--space-unit) * 2.5); } /* Bloque "highlight" tipo marcador editorial — mismo tratamiento del Hero */ .highlight { display: inline-block; padding: 0.05em 0.28em; } .highlight--lilac { background: var(--vtc-lilac); color: var(--vtc-black); } .servicios__intro { font-family: var(--font-body); font-weight: 400; font-size: clamp(1rem, 2vw, 1.1rem); color: rgba(255, 255, 255, 0.68); max-width: 48ch; } /* ============================================ GRID DE TARJETAS Mobile-first: 1 columna → 3 columnas en desktop ============================================ */ .servicios__grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--space-unit) * 3); } .servicios__grid .servicios__card:nth-child(2) { transition-delay: 0.1s; } .servicios__grid .servicios__card:nth-child(3) { transition-delay: 0.2s; } @media (min-width: 720px) { .servicios__grid { grid-template-columns: repeat(3, 1fr); gap: calc(var(--space-unit) * 3.5); } } /* ============================================ TARJETA DE SERVICIO ============================================ */ .servicios__card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: calc(var(--space-unit) * 4); display: flex; flex-direction: column; align-items: flex-start; transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .servicios__card:hover, .servicios__card:focus-within { transform: translateY(-6px); border-color: rgba(213, 202, 221, 0.55); background: rgba(255, 255, 255, 0.05); } /* Ícono */ .servicios__card-icono { width: 48px; height: 48px; border-radius: 50%; background: rgba(213, 202, 221, 0.12); display: flex; align-items: center; justify-content: center; color: var(--vtc-lilac); margin-bottom: calc(var(--space-unit) * 2.5); transition: background-color 0.25s ease; } .servicios__card:hover .servicios__card-icono { background: var(--vtc-lilac); color: var(--vtc-black); } .servicios__card-svg { width: 20px; height: 20px; } /* Tag tipo "pill" — repite el estilo de los botones del Hero */ .servicios__card-etiqueta { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--vtc-lilac); background: rgba(213, 202, 221, 0.1); border-radius: 999px; padding: 0.35em 0.9em; margin-bottom: calc(var(--space-unit) * 1.75); } .servicios__card-titulo { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--vtc-white); margin-bottom: calc(var(--space-unit) * 1.25); } .servicios__card-descripcion { font-family: var(--font-body); font-weight: 400; font-size: 0.96rem; line-height: 1.5; color: rgba(255, 255, 255, 0.68); } /* Respeta preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { .servicios__card, .servicios__card-icono { transition: none; } .servicios__card:hover { transform: none; } } /* ============================================ RESPONSIVE — ajustes para pantallas grandes ============================================ */ @media (min-width: 768px) { .servicios { padding: calc(var(--space-unit) * 12) calc(var(--space-unit) * 7); } } @media (min-width: 1200px) { .servicios { padding-left: calc(var(--space-unit) * 10); padding-right: calc(var(--space-unit) * 10); } } /* ============================================ VANTICHOR — SECCIÓN PRUEBA SOCIAL / RESULTADOS Continúa la identidad de Hero y Servicios. Mismo sistema de espaciado centralizado que Servicios, para evitar desalineaciones entre secciones. ============================================ */ /* ============================================ CONTENEDOR DE SECCIÓN ============================================ */ .prueba-social { /* Única fuente de verdad para el margen lateral, igual criterio que en Servicios: clamp() en vez de breakpoints manuales repetidos. */ --section-padding-x: clamp(2rem, 6vw, 5rem); --section-padding-y: clamp(4.5rem, 9vw, 6rem); position: relative; overflow: hidden; background: linear-gradient(to bottom, var(--vtc-black) 0%, #100c13 100%); padding-block: var(--section-padding-y); } /* Flecha de fondo, muy tenue — mismo recurso que Servicios, lado opuesto */ .prueba-social__watermark { position: absolute; top: 6%; left: -4%; width: clamp(220px, 26vw, 380px); aspect-ratio: 233.04077 / 274.73657; fill: var(--vtc-white); opacity: 0.04; transform: rotate(14deg); pointer-events: none; z-index: 0; } .prueba-social__inner { position: relative; z-index: 1; max-width: 1180px; padding-inline: var(--section-padding-x); } /* ============================================ ENCABEZADO ============================================ */ .prueba-social__header { max-width: 620px; margin-bottom: clamp(3rem, 6vw, 3.5rem); } /* ============================================ FOTO — corta la monotonía de solo-tarjetas ============================================ */ .prueba-social__foto { display: block; width: 100%; height: clamp(200px, 32vw, 320px); object-fit: cover; object-position: center 30%; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); filter: saturate(0.85) brightness(0.95); margin-bottom: clamp(3rem, 6vw, 3.5rem); } .prueba-social__titulo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5.2vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--vtc-white); margin-bottom: 1.25rem; } /* Highlight tipo "recorte editorial", compartido con Hero y Servicios */ .highlight { display: inline-block; padding: 0.05em 0.28em; } .highlight--white { background: var(--vtc-white); color: var(--vtc-black); } .prueba-social__intro { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, 0.65); } /* ============================================ BLOQUE 1 — Promesas de proceso ============================================ */ .prueba-social__promesas { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: clamp(4rem, 8vw, 5.5rem); } @media (min-width: 720px) { .prueba-social__promesas { grid-template-columns: repeat(3, 1fr); } } .prueba-social__promesas .promesa:nth-child(2) { transition-delay: 0.1s; } .prueba-social__promesas .promesa:nth-child(3) { transition-delay: 0.2s; } .promesa { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 1.75rem; transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .promesa:hover { transform: translateY(-4px); border-color: rgba(213, 202, 221, 0.4); background: rgba(255, 255, 255, 0.05); } .promesa__icono { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(213, 202, 221, 0.12); color: var(--vtc-lilac); margin-bottom: 1rem; } .promesa__icono svg { width: 20px; height: 20px; } .promesa__etiqueta { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vtc-black); background: var(--vtc-lilac); padding: 0.32em 0.9em; border-radius: 999px; margin-bottom: 0.9rem; } .promesa__titulo { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--vtc-white); margin-bottom: 0.5rem; } .promesa__descripcion { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.62); } /* ============================================ BLOQUE 2 — Testimonios (placeholder) ============================================ */ .prueba-social__testimonios { margin-top: clamp(1rem, 3vw, 2rem); } .prueba-social__subtitulo { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--vtc-white); margin-bottom: 1.75rem; } .testimonios__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .testimonios__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .testimonios__grid { grid-template-columns: repeat(3, 1fr); } } .testimonios__grid .testimonio:nth-child(2) { transition-delay: 0.1s; } .testimonios__grid .testimonio:nth-child(3) { transition-delay: 0.2s; } .testimonio { position: relative; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 1.75rem; transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .testimonio:hover { transform: translateY(-4px); border-color: rgba(213, 202, 221, 0.4); background: rgba(255, 255, 255, 0.05); } .testimonio__cita { position: relative; z-index: 1; font-family: var(--font-body); font-style: italic; font-size: 0.98rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin-bottom: 1.5rem; } .testimonio__cita::before { content: "\201C"; position: absolute; top: -1.6rem; left: -0.4rem; font-family: var(--font-display); font-style: normal; font-weight: 900; font-size: 4rem; line-height: 1; color: var(--vtc-lilac); opacity: 0.18; z-index: -1; } .testimonio__autor { display: flex; align-items: center; gap: 12px; margin-top: auto; } .testimonio__avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--vtc-lilac); color: var(--vtc-black); font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(213, 202, 221, 0.45); } /* Lista para usar si se reemplaza el avatar por una foto real */ .testimonio__avatar-img { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(213, 202, 221, 0.45); } .testimonio__meta { display: flex; flex-direction: column; gap: 2px; } .testimonio__nombre { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--vtc-white); } .testimonio__negocio { font-family: var(--font-body); font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); } @media (prefers-reduced-motion: reduce) { .promesa, .testimonio { transition: none; } .promesa:hover, .testimonio:hover { transform: none; } } /* ============================================ VANTICHOR — SECCIÓN CONTACTO / CTA FINAL ============================================ */ /* ============================================ CONTENEDOR DE SECCIÓN ============================================ */ .contacto { --section-padding-x: clamp(2rem, 6vw, 5rem); --section-padding-y: clamp(5rem, 10vw, 7rem); position: relative; background: radial-gradient(circle at 50% 20%, var(--vtc-purple-dark) 0%, #190826 75%); padding-top: var(--section-padding-y); } .contacto::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 260px; background: linear-gradient(to bottom, #100c13, transparent); pointer-events: none; z-index: 1; } .contacto__inner { position: relative; z-index: 2; max-width: 640px; padding-inline: var(--section-padding-x); text-align: left; } /* ============================================ TÍTULO Y CONTENIDO PRINCIPAL ============================================ */ .contacto__titulo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 6vw, 3.25rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--vtc-white); margin-bottom: 1.25rem; } /* Highlight tipo "recorte editorial", compartido con el resto de la landing */ .highlight { display: inline-block; padding: 0.05em 0.28em; } .highlight--lilac { background: var(--vtc-lilac); color: var(--vtc-black); } .contacto__subtitulo { font-family: var(--font-body); font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.55; color: rgba(255, 255, 255, 0.75); max-width: 44ch; margin-bottom: 2.25rem; } /* ============================================ BOTÓN CTA — tipo "pill" ============================================ */ .contacto__boton { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--vtc-black); background: var(--vtc-white); text-decoration: none; padding: 1.05em 2.4em; border-radius: 20px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease, background-color 0.2s ease; } .contacto__boton:hover, .contacto__boton:focus-visible { background: var(--vtc-lilac); transform: translateY(-2px); } .contacto__boton:focus-visible { outline: 2px solid var(--vtc-lilac); outline-offset: 3px; } .contacto__alternativo { font-family: var(--font-body); font-size: 0.92rem; color: rgba(255, 255, 255, 0.6); margin-top: 1.25rem; } .contacto__email { color: var(--vtc-lilac); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } .contacto__email:hover { color: var(--vtc-white); } /* ============================================ FOOTER ============================================ */ .contacto__footer { position: relative; z-index: 2; margin-top: clamp(4rem, 9vw, 6rem); border-top: 1px solid rgba(255, 255, 255, 0.1); } .contacto__footer-inner { max-width: 1180px; padding: 2rem var(--section-padding-x, clamp(2rem, 6vw, 5rem)); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .contacto__marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--vtc-white); } .contacto__marca-icono { width: 22px; height: 22px; fill: var(--vtc-white); } .contacto__marca-nombre { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; } .contacto__marca-punto { color: var(--vtc-lilac); } .contacto__copyright { font-family: var(--font-body); font-size: 0.82rem; color: rgba(255, 255, 255, 0.45); } .contacto__copyright-link { color: rgba(255, 255, 255, 0.45); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; } .contacto__copyright-link:hover { color: var(--vtc-lilac); } /* ============================================ RESPONSIVE ============================================ */ @media (min-width: 640px) { .contacto__footer-inner { flex-direction: row; align-items: center; justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { .contacto__boton { transition: none; } .contacto__boton:hover { transform: none; } } /* ============================================ VANTICHOR — PÁGINA LEGAL (privacidad.html) ============================================ */ .legal-header { padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 4) 0; } .legal { padding: calc(var(--space-unit) * 6) calc(var(--space-unit) * 4) calc(var(--space-unit) * 9); } .legal__inner { max-width: 720px; } .legal__titulo { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 2.75rem); color: var(--vtc-white); margin-bottom: 0.75rem; } .legal__actualizado { font-family: var(--font-body); font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); margin-bottom: calc(var(--space-unit) * 5); } .legal__seccion { margin-bottom: calc(var(--space-unit) * 4); } .legal__seccion h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--vtc-white); margin-bottom: 0.75rem; } .legal__seccion p { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin-bottom: 0.75rem; } .legal__seccion ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; } .legal__seccion li { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); } .legal__seccion a { color: var(--vtc-lilac); text-decoration: underline; text-underline-offset: 2px; } @media (min-width: 768px) { .legal-header { padding: calc(var(--space-unit) * 5) calc(var(--space-unit) * 7) 0; } .legal { padding: calc(var(--space-unit) * 8) calc(var(--space-unit) * 7) calc(var(--space-unit) * 12); } }