Update src/app/styles/variables.css

Merge version_3 into main

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState } from "react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
@@ -13,6 +14,46 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 
 export default function LandingPage() {
+  const [lang, setLang] = useState('es');
+
+  const content = {
+    es: {
+      nav: [{name: "Inicio", id: "hero"}, {name: "Clínica", id: "about"}, {name: "Tratamientos", id: "features"}, {name: "Precios", id: "pricing"}, {name: "Contacto", id: "contact"}],
+      hero: { title: "Tu sonrisa es nuestra prioridad en Barcelona", desc: "Profesionales altamente cualificados en constante formación para ofrecerte una odontología de vanguardia, cercana y honesta.", btns: ["Pedir Cita por WhatsApp", "Primera Visita Gratuita"] },
+      about: { title: "Bienvenidos a Marín García", desc: ["En Marín-García trabajamos día a día para conseguirte esa sonrisa que deseas. Nuestro equipo humano destaca por su cercanía, amabilidad, ilusión y confianza.", "Contamos con más de 15 años de experiencia y estamos certificados por Top Doctors, garantizando una atención ética, transparente y sin sorpresas."] },
+      features: { title: "Nuestros Tratamientos", desc: "La tecnología es nuestra aliada. Utilizamos los últimos avances para garantizar diagnósticos precisos y procedimientos indoloros.", items: [{title: "Implantes de Máxima Calidad", desc: "Soluciones funcionales y estéticas duraderas."}, {title: "Ortodoncia Invisible", desc: "La forma más discreta de mejorar tu alineación."}] },
+      team: { title: "Nuestro Equipo Humano", desc: "Profesionales cercanos que te acompañan en todo el proceso." },
+      pricing: { title: "Precios Orientativos", desc: "Transparencia total para que planifiques tu tratamiento.", plan: { badge: "Visita", period: "Primera consulta", desc: "Diagnóstico y plan de tratamiento sin compromiso.", btn: "Reservar", featTitle: "Incluye:", feats: ["Revisión completa", "Radiografía digital"] } },
+      testimonials: { title: "Lo que dicen nuestros pacientes", desc: "Más de 15 años de confianza en Barcelona.", quote: "Un equipo humano excepcional, me sentí como en casa desde el primer minuto." },
+      contact: { tag: "Contacto", title: "Solicita tu primera visita sin compromiso", desc: "Estamos en Sant Antoni María Claret nº324, Barcelona. Escríbenos y estaremos encantados de resolver tus dudas.", placeholder: "Tu email de contacto", btn: "Enviar consulta", terms: "Al enviar, aceptas nuestra política de privacidad." },
+      footer: { left: "Citas: citas@maringarciaclinicadental.com", right: "WhatsApp: 608 685 127" }
+    },
+    ca: {
+      nav: [{name: "Inici", id: "hero"}, {name: "Clínica", id: "about"}, {name: "Tractaments", id: "features"}, {name: "Preus", id: "pricing"}, {name: "Contacte", id: "contact"}],
+      hero: { title: "El teu somriure és la nostra prioritat a Barcelona", desc: "Professionals altament qualificats en constant formació per oferir-te una odontologia d'avantguarda, propera i honesta.", btns: ["Demanar Cita per WhatsApp", "Primera Visita Gratuïta"] },
+      about: { title: "Benvinguts a Marín García", desc: ["A Marín-García treballem dia a dia per aconseguir-te aquest somriure que desitges. El nostre equip humà destaca per la seva proximitat, amabilitat, il·lusió i confiança.", "Comptem amb més de 15 anys d'experiència i estem certificats per Top Doctors, garantint una atenció ètica, transparent i sense sorpreses."] },
+      features: { title: "Els Nostres Tractaments", desc: "La tecnologia és la nostra aliada. Utilitzem els últims avenços per garantir diagnòstics precisos i procediments indolors.", items: [{title: "Implants de Màxima Qualitat", desc: "Solucions funcionals i estètiques duradores."}, {title: "Ortodòncia Invisible", desc: "La forma més discreta de millorar el teu alineament."}] },
+      team: { title: "El Nostre Equip Humà", desc: "Professionals propers que t'acompanyen en tot el procés." },
+      pricing: { title: "Preus Orientatius", desc: "Transparència total perquè planifiquis el teu tractament.", plan: { badge: "Visita", period: "Primera consulta", desc: "Diagnòstic i pla de tractament sense compromís.", btn: "Reservar", featTitle: "Inclou:", feats: ["Revisió completa", "Radiografia digital"] } },
+      testimonials: { title: "El que diuen els nostres pacients", desc: "Més de 15 anys de confiança a Barcelona.", quote: "Un equip humà excepcional, em vaig sentir com a casa des del primer minut." },
+      contact: { tag: "Contacte", title: "Sol·licita la teva primera visita sense compromís", desc: "Som a Sant Antoni María Claret nº324, Barcelona. Escriu-nos i estarem encantats de resoldre els teus dubtes.", placeholder: "El teu email de contacte", btn: "Enviar consulta", terms: "En enviar, acceptes la nostra política de privadesa." },
+      footer: { left: "Cites: citas@maringarciaclinicadental.com", right: "WhatsApp: 608 685 127" }
+    },
+    en: {
+      nav: [{name: "Home", id: "hero"}, {name: "Clinic", id: "about"}, {name: "Treatments", id: "features"}, {name: "Pricing", id: "pricing"}, {name: "Contact", id: "contact"}],
+      hero: { title: "Your smile is our priority in Barcelona", desc: "Highly qualified professionals in constant training to offer you honest, state-of-the-art dentistry.", btns: ["Book via WhatsApp", "Free First Visit"] },
+      about: { title: "Welcome to Marín García", desc: ["At Marín-García we work every day to get you the smile you desire. Our team stands out for its closeness, kindness, enthusiasm, and trust.", "We have over 15 years of experience and are Top Doctors certified, ensuring ethical, transparent care without surprises."] },
+      features: { title: "Our Treatments", desc: "Technology is our ally. We use the latest advances to ensure precise diagnoses and painless procedures.", items: [{title: "Top Quality Implants", desc: "Long-lasting functional and aesthetic solutions."}, {title: "Invisible Orthodontics", desc: "The most discreet way to improve your alignment."}] },
+      team: { title: "Our Team", desc: "Friendly professionals who accompany you throughout the process." },
+      pricing: { title: "Pricing", desc: "Total transparency so you can plan your treatment.", plan: { badge: "Visit", period: "First consultation", desc: "Diagnosis and treatment plan without commitment.", btn: "Book", featTitle: "Includes:", feats: ["Full check-up", "Digital X-ray"] } },
+      testimonials: { title: "What our patients say", desc: "More than 15 years of trust in Barcelona.", quote: "An exceptional team, I felt at home from the first minute." },
+      contact: { tag: "Contact", title: "Request your first visit without commitment", desc: "We are located at Sant Antoni María Claret nº324, Barcelona. Write to us and we'll be happy to answer your questions.", placeholder: "Your contact email", btn: "Send inquiry", terms: "By sending, you agree to our privacy policy." },
+      footer: { left: "Appointments: citas@maringarciaclinicadental.com", right: "WhatsApp: 608 685 127" }
+    }
+  };
+
+  const t = content[lang];
+
   return (
     <ThemeProvider
         defaultButtonVariant="text-shift"
@@ -27,325 +68,119 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+  <div id="nav" data-section="nav" className="px-4 md:px-0">
       <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Inicio",
-          id: "hero",
-        },
-        {
-          name: "Clínica",
-          id: "about",
-        },
-        {
-          name: "Tratamientos",
-          id: "features",
-        },
-        {
-          name: "Precios",
-          id: "pricing",
-        },
-        {
-          name: "Contacto",
-          id: "contact",
-        },
-      ]}
+      navItems={t.nav}
       brandName="Marín García"
-      button={{
-        text: "Cita Online",
-        href: "https://wa.me/34608685127",
-      }}
+      button={{ text: "Cita Online", href: "https://wa.me/34608685127"}}
     />
+    <div className="flex justify-center gap-2 py-2">
+      {['es', 'ca', 'en'].map((l) => (
+        <button key={l} onClick={() => setLang(l)} className={`px-2 py-1 text-xs uppercase ${lang === l ? 'font-bold' : 'opacity-50'}`}>{l}</button>
+      ))}
+    </div>
   </div>
 
-  <div id="hero" data-section="hero">
+  <div id="hero" data-section="hero" className="px-4 md:px-0">
       <HeroBillboardGallery
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Tu sonrisa es nuestra prioridad en Barcelona"
-      description="Profesionales altamente cualificados en constante formación para ofrecerte una odontología de vanguardia, cercana y honesta."
-      buttons={[
-        {
-          text: "Pedir Cita por WhatsApp",
-          href: "https://wa.me/34608685127",
-        },
-        {
-          text: "Primera Visita Gratuita",
-          href: "#contact",
-        },
-      ]}
+      background={{ variant: "gradient-bars"}}
+      title={t.hero.title}
+      description={t.hero.desc}
+      buttons={[{ text: t.hero.btns[0], href: "https://wa.me/34608685127" }, { text: t.hero.btns[1], href: "#contact" }]}
       mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/fuzzy-counter-shop_1203-719.jpg",
-          imageAlt: "Clínica Dental Marín García",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/ideal-beginning-sunday_1098-15647.jpg",
-          imageAlt: "Instalaciones modernas",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/full-equiped-medical-cabinet_1303-23917.jpg",
-          imageAlt: "Sala de espera",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-reception-desk-appointments-medical-facility-waiting-area-with-chairs-sit-rows-before-attending-checkup-consultation-healthcare-clinical-space-emergency-center_482257-46930.jpg",
-          imageAlt: "Recepción de la clínica",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-dentist-with-patient_23-2149164286.jpg",
-          imageAlt: "Consulta dental",
-        },
+        { imageSrc: "http://img.b2bpic.net/free-photo/fuzzy-counter-shop_1203-719.jpg", imageAlt: "Clínica Dental" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/ideal-beginning-sunday_1098-15647.jpg", imageAlt: "Instalaciones" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/full-equiped-medical-cabinet_1303-23917.jpg", imageAlt: "Sala de espera" },
       ]}
       mediaAnimation="slide-up"
     />
   </div>
 
-  <div id="about" data-section="about">
+  <div id="about" data-section="about" className="px-4 md:px-0">
       <TextSplitAbout
       useInvertedBackground={false}
-      title="Bienvenidos a Marín García"
-      description={[
-        "En Marín-García trabajamos día a día para conseguirte esa sonrisa que deseas. Nuestro equipo humano destaca por su cercanía, amabilidad, ilusión y confianza.",
-        "Contamos con más de 15 años de experiencia y estamos certificados por Top Doctors, garantizando una atención ética, transparente y sin sorpresas.",
-      ]}
+      title={t.about.title}
+      description={t.about.desc}
     />
   </div>
 
-  <div id="features" data-section="features">
+  <div id="features" data-section="features" className="px-4 md:px-0">
       <FeatureCardOne
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
+      gridVariant="two-items-per-row"
       useInvertedBackground={true}
       features={[
-        {
-          title: "Implantes de Máxima Calidad",
-          description: "Soluciones funcionales y estéticas duraderas.",
-          imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-x-ray-picture-teeth-tablet_651396-1403.jpg",
-          imageAlt: "Implantes",
-        },
-        {
-          title: "Ortodoncia Invisible",
-          description: "La forma más discreta de mejorar tu alineación.",
-          imageSrc: "http://img.b2bpic.net/free-photo/dentist-takes-instruments-doctor-protective-gloves-medic-uses-device_1157-40917.jpg",
-          imageAlt: "Ortodoncia",
-        },
-        {
-          title: "Estética Dental",
-          description: "Carillas y blanqueamientos con resultados naturales.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-dentist-treating-patients-teeth-with-dental-microscope-dentistry-concept_169016-67130.jpg",
-          imageAlt: "Estética",
-        },
-        {
-          title: "Odontopediatría",
-          description: "Cuidado especializado para los más pequeños.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-dentist-showing-patient-dental-xray-dentistry-concept_169016-67187.jpg",
-          imageAlt: "Odontopediatría",
-        },
-        {
-          title: "Endodoncia",
-          description: "Tratamiento avanzado para salvar tus piezas naturales.",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-dentist-wearing-uniform-mask-sitting-chair-his-workplace-dental-clinic_613910-17789.jpg",
-          imageAlt: "Endodoncia",
-        },
+        { title: t.features.items[0].title, description: t.features.items[0].desc, imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-x-ray-picture-teeth-tablet_651396-1403.jpg", imageAlt: "Implantes" },
+        { title: t.features.items[1].title, description: t.features.items[1].desc, imageSrc: "http://img.b2bpic.net/free-photo/dentist-takes-instruments-doctor-protective-gloves-medic-uses-device_1157-40917.jpg", imageAlt: "Ortodoncia" },
       ]}
-      title="Nuestros Tratamientos"
-      description="La tecnología es nuestra aliada. Utilizamos los últimos avances para garantizar diagnósticos precisos y procedimientos indoloros."
+      title={t.features.title}
+      description={t.features.desc}
     />
   </div>
 
-  <div id="team" data-section="team">
+  <div id="team" data-section="team" className="px-4 md:px-0">
       <TeamCardSix
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
+      gridVariant="asymmetric-60-wide-40-narrow"
       useInvertedBackground={false}
       members={[
-        {
-          id: "m1",
-          name: "Dr. Marín",
-          role: "Odontólogo Principal",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-doctor-crossed-hands-front-white-wall_158595-7667.jpg",
-          imageAlt: "Dr. Marín",
-        },
-        {
-          id: "m2",
-          name: "Dra. García",
-          role: "Especialista Estética",
-          imageSrc: "http://img.b2bpic.net/free-photo/content-mature-doctor-with-hands-pockets_1262-7199.jpg",
-          imageAlt: "Dra. García",
-        },
-        {
-          id: "m3",
-          name: "Equipo Clínico",
-          role: "Atención al Paciente",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-dentist-with-eyeglasses_23-2147862084.jpg",
-          imageAlt: "Equipo",
-        },
-        {
-          id: "m4",
-          name: "Dra. López",
-          role: "Ortodoncista",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-mask-dentistry-concept-dental-treatment_169016-67059.jpg",
-          imageAlt: "Dra. López",
-        },
-        {
-          id: "m5",
-          name: "Dr. Torres",
-          role: "Periodoncista",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-male-dentist-dentist-s-clinic_329181-20759.jpg",
-          imageAlt: "Dr. Torres",
-        },
+        { id: "m1", name: "Dr. Marín", role: "Odontólogo Principal", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-doctor-crossed-hands-front-white-wall_158595-7667.jpg", imageAlt: "Dr. Marín" },
+        { id: "m2", name: "Dra. García", role: "Especialista Estética", imageSrc: "http://img.b2bpic.net/free-photo/content-mature-doctor-with-hands-pockets_1262-7199.jpg", imageAlt: "Dra. García" },
       ]}
-      title="Nuestro Equipo Humano"
-      description="Profesionales cercanos que te acompañan en todo el proceso."
+      title={t.team.title}
+      description={t.team.desc}
     />
   </div>
 
-  <div id="pricing" data-section="pricing">
+  <div id="pricing" data-section="pricing" className="px-4 md:px-0">
       <PricingCardFive
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={true}
       plans={[
-        {
-          id: "p1",
-          tag: "Visita",
-          price: "0€",
-          period: "Primera consulta",
-          description: "Diagnóstico y plan de tratamiento sin compromiso.",
-          button: {
-            text: "Reservar",
-            href: "#contact",
-          },
-          featuresTitle: "Incluye:",
-          features: [
-            "Revisión completa",
-            "Radiografía digital",
-            "Plan de tratamiento",
-          ],
-        },
-        {
-          id: "p2",
-          tag: "Estética",
-          price: "Desde 350€",
-          period: "Blanqueamiento",
-          description: "Resultados profesionales con tecnología segura.",
-          button: {
-            text: "Más info",
-            href: "https://wa.me/34608685127",
-          },
-          featuresTitle: "Incluye:",
-          features: [
-            "Sesión clínica",
-            "Material de alta calidad",
-          ],
-        },
-        {
-          id: "p3",
-          tag: "Implantes",
-          price: "Consulta",
-          period: "Personalizado",
-          description: "Financiación hasta 48 meses sin intereses.",
-          button: {
-            text: "Consultar",
-            href: "https://wa.me/34608685127",
-          },
-          featuresTitle: "Ventajas:",
-          features: [
-            "Materiales premium",
-            "Garantía de satisfacción",
-          ],
-        },
+        { id: "p1", tag: t.pricing.plan.badge, price: "0€", period: t.pricing.plan.period, description: t.pricing.plan.desc, button: { text: t.pricing.plan.btn, href: "#contact" }, featuresTitle: t.pricing.plan.featTitle, features: t.pricing.plan.feats },
       ]}
-      title="Precios Orientativos"
-      description="Transparencia total para que planifiques tu tratamiento."
+      title={t.pricing.title}
+      description={t.pricing.desc}
     />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
+  <div id="testimonials" data-section="testimonials" className="px-4 md:px-0">
       <TestimonialCardTen
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",
-          title: "Excelente atención",
-          quote: "Un equipo humano excepcional, me sentí como en casa desde el primer minuto.",
-          name: "Dámaso Curto",
-          role: "Paciente",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-mask-dentistry-concept-dental-treatment_169016-66974.jpg",
-        },
-        {
-          id: "t2",
-          title: "Recomendable 100%",
-          quote: "Honestidad y transparencia total. No me recomendaron nada innecesario.",
-          name: "María López",
-          role: "Paciente",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-dentist-sitting-chair-stomatology-cabinet_651396-2212.jpg",
-        },
-        {
-          id: "t3",
-          title: "Gran profesionalidad",
-          quote: "El trato es increíble. Muy puntuales y rápidos.",
-          name: "Juan Martínez",
-          role: "Paciente",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-dentist-using-digital-tablet_107420-74079.jpg",
-        },
-        {
-          id: "t4",
-          title: "Mi dentista de confianza",
-          quote: "Después de años buscando, por fin encontré un equipo en el que confío.",
-          name: "Ana S.",
-          role: "Paciente",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-health-worker_23-2148980804.jpg",
-        },
-        {
-          id: "t5",
-          title: "Resultado espectacular",
-          quote: "Muy contento con mi tratamiento de ortodoncia.",
-          name: "Carlos P.",
-          role: "Paciente",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-female-nurse-hospital_23-2150796684.jpg",
-        },
+        { id: "t1", title: "Excelente", quote: t.testimonials.quote, name: "Dámaso Curto", role: "Paciente", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-mask-dentistry-concept-dental-treatment_169016-66974.jpg" },
       ]}
-      title="Lo que dicen nuestros pacientes"
-      description="Más de 15 años de confianza en Barcelona."
+      title={t.testimonials.title}
+      description={t.testimonials.desc}
     />
   </div>
 
-  <div id="contact" data-section="contact">
+  <div id="contact" data-section="contact" className="px-4 md:px-0">
       <ContactSplit
       useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Contacto"
-      title="Solicita tu primera visita sin compromiso"
-      description="Estamos en Sant Antoni María Claret nº324, Barcelona. Escríbenos y estaremos encantados de resolver tus dudas."
+      background={{ variant: "plain" }}
+      tag={t.contact.tag}
+      title={t.contact.title}
+      description={t.contact.desc}
       imageSrc="http://img.b2bpic.net/free-photo/close-up-dentist-using-instruments_23-2151053285.jpg"
-      inputPlaceholder="Tu email de contacto"
-      buttonText="Enviar consulta"
-      termsText="Al enviar, aceptas nuestra política de privacidad."
+      inputPlaceholder={t.contact.placeholder}
+      buttonText={t.contact.btn}
+      termsText={t.contact.terms}
     />
   </div>
 
-  <div id="footer" data-section="footer">
+  <div id="footer" data-section="footer" className="px-4 md:px-0">
       <FooterLogoReveal
       logoText="Marín García"
-      leftLink={{
-        text: "Citas: citas@maringarciaclinicadental.com",
-        href: "mailto:citas@maringarciaclinicadental.com",
-      }}
-      rightLink={{
-        text: "WhatsApp: 608 685 127",
-        href: "https://wa.me/34608685127",
-      }}
+      leftLink={{ text: t.footer.left, href: "mailto:citas@maringarciaclinicadental.com" }}
+      rightLink={{ text: t.footer.right, href: "https://wa.me/34608685127" }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-source-sans-3), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-source-sans-3), sans-serif;
+  font-family: var(--font-inter), sans-serif;
 }

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #ffffff;
-  --card: #f7f9fc;
-  --foreground: #001a33;
-  --primary-cta: #0056b3;
+  --card: #f0f8ff;
+  --foreground: #1a1a1a;
+  --primary-cta: #15479c;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #e8f0fe;
   --secondary-cta-text: #0056b3;
-  --accent: #d1e3f8;
-  --background-accent: #f0f4f8;
+  --accent: #a8cce8;
+  --background-accent: #f0f8ff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);