/* ==========================================================================
   ORIGINAL CARRD.CO CLONE STYLESHEET
   Target: https://kirshin.carrd.co/
   ========================================================================== */

/* 1. CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}
body {
    line-height: 1;
}
ol,ul {
    list-style: none;
}
blockquote,q {
    quotes: none;
}
blockquote::before,blockquote::after,q::before,q::after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 2. Global Document & Viewport Settings */
body {
    -webkit-text-size-adjust: none;
}
mark {
    background-color: transparent;
    color: inherit;
}
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input[type="text"],input[type="email"],select,textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
}
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --background-height: 100vh;
    --site-language-alignment: left;
    --site-language-direction: ltr;
    --site-language-flex-alignment: flex-start;
    --site-language-indent-left: 1;
    --site-language-indent-right: 0;
    --site-language-margin-left: 0;
    --site-language-margin-right: auto;
    --viewport-height: 100vh;
}

html {
    font-size: 18pt;
}

body {
    line-height: 1.0;
    min-height: var(--viewport-height);
    min-width: 320px;
    overflow-x: hidden;
    word-wrap: break-word;
    background-color: #725E92;
    font-family: sans-serif;
}

/* 3. Gorgeous Page-wide Background Gradients */
body::before {
    background-attachment: scroll;
    content: '';
    display: block;
    height: var(--background-height);
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: scale(1);
    width: 100vw;
    z-index: 0;
    background-image: linear-gradient(45deg, #A15C5C 0%, #425FC7 100%);
    background-position: 0% 0%;
    background-repeat: repeat;
    background-size: auto;
}

body::after {
    background-color: #FFFFFF;
    content: '';
    display: block;
    pointer-events: none;
    position: fixed;
    transform: scale(1);
    z-index: 1;
    height: 100%;
    left: 0;
    opacity: 0;
    top: 0;
    transition: opacity 2s ease-in-out 0.375s, visibility 2s 0.375s;
    visibility: hidden;
    width: 100%;
}

body.is-loading::after {
    opacity: 1;
    visibility: visible;
}

/* Typography styles */
u {
    text-decoration: underline;
}
strong {
    color: inherit;
    font-weight: bolder;
}
em {
    font-style: italic;
}

a {
    color: inherit;
    text-decoration: underline;
    transition: color 0.25s ease;
}

/* 4. Layout Wrappers */
.site-wrapper {
    -webkit-overflow-scrolling: touch;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--viewport-height);
    overflow: hidden;
    position: relative;
    z-index: 2;
    padding: 1.1875rem 1.1875rem 1.1875rem 1.1875rem;
}

/* 5. Main Card with Organic Noise + Gradient Texture */
.site-main {
    --alignment: center;
    --flex-alignment: center;
    --indent-left: 1;
    --indent-right: 1;
    --margin-left: auto;
    --margin-right: auto;
    --border-radius-tl: 0.625rem;
    --border-radius-tr: 0.625rem;
    --border-radius-br: 0.625rem;
    --border-radius-bl: 0.625rem;
    
    align-items: center;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    max-width: 100%;
    position: relative;
    text-align: var(--alignment);
    z-index: 1;
    
    /* Fractal Noise filter overlaid on top of vibrant orange-gold gradient */
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cfilter%20id%3D%22noise%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.875%22%20result%3D%22noise%22%20%2F%3E%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.5%200%22%20%2F%3E%20%3C%2Ffilter%3E%20%3Crect%20filter%3D%22url%28%23noise%29%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20fill%3D%22transparent%22%20opacity%3D%221%22%20%2F%3E%3C%2Fsvg%3E'), 
                     linear-gradient(103deg, #BF4D34 0%, #E6A87C 100%);
    background-size: 512px, cover;
    background-position: center, 0% 0%;
    background-repeat: repeat, repeat;
    
    box-shadow: 0rem 1.125rem 4.125rem 0rem rgba(0,0,0,0.451);
    border-radius: var(--border-radius-tl) var(--border-radius-tr) var(--border-radius-br) var(--border-radius-bl);
    transition: opacity 0.75s ease 0.125s, transform 0.75s ease 0.125s;
}

.site-main > .inner {
    --padding-horizontal: 1.75rem;
    --padding-vertical: 2.375rem;
    --spacing: 0rem;
    --width: 36rem;
    border-radius: var(--border-radius-tl) var(--border-radius-tr) var(--border-radius-br) var(--border-radius-bl);
    max-width: 100%;
    position: relative;
    width: var(--width);
    z-index: 1;
    padding: var(--padding-vertical) var(--padding-horizontal);
}

.site-main > .inner > * {
    margin-top: var(--spacing);
    margin-bottom: var(--spacing);
}

.site-main > .inner > :first-child {
    margin-top: 0 !important;
}

.site-main > .inner > :last-child {
    margin-bottom: 0 !important;
}

/* Loader Animation states */
body.is-loading .site-main {
    opacity: 0;
    transform: scale(0.94375);
}

body.is-instant .site-main, 
body.is-instant .site-main > .inner > *,
body.is-instant .site-main > .inner > section > * {
    transition: none !important;
}

body.is-instant::after {
    display: none !important;
    transition: none !important;
}

/* 6. Columns Wrapper and Container */
.container-component {
    position: relative;
}

.container-component > .wrapper {
    vertical-align: top;
    position: relative;
    max-width: 100%;
    border-radius: inherit;
}

.container-component > .wrapper > .inner {
    vertical-align: top;
    position: relative;
    max-width: 100%;
    border-radius: inherit;
    text-align: var(--alignment);
}

.container-component.columns01 {
    --alignment: left;
    --flex-alignment: flex-start;
    --indent-left: 1;
    --indent-right: 0;
    --margin-left: 0;
    --margin-right: auto;
}

.container-component.columns01 > .wrapper {
    display: inline-block;
    width: 40rem;
    background-color: transparent;
}

.container-component.columns01 > .wrapper > .inner {
    --gutters: 1rem;
    --padding-horizontal: 0rem;
    --padding-vertical: 0rem;
    --spacing: 1rem;
    padding: var(--padding-vertical) var(--padding-horizontal);
}

.container-component.columns01.default > .wrapper > .inner > * {
    margin-bottom: var(--spacing);
    margin-top: var(--spacing);
}

.container-component.columns01.default > .wrapper > .inner > *:first-child {
    margin-top: 0 !important;
}

.container-component.columns01.default > .wrapper > .inner > *:last-child {
    margin-bottom: 0 !important;
}

/* 7. Text Styles (Lato and Kulim Park Instances) */
.text-component {
    direction: var(--site-language-direction);
    position: relative;
}

.text-component span.p {
    display: block;
    position: relative;
}

.text-component span[style], 
.text-component strong, 
.text-component a, 
.text-component code, 
.text-component mark {
    -webkit-text-fill-color: currentcolor;
}

/* Eugenio Kirshin Left Header */
.text-component.instance-4 {
    color: #FFFFFF;
    font-family: 'Lato', sans-serif;
    letter-spacing: -0.05rem;
    width: 100%;
    font-size: 2.25em;
    line-height: 1.125;
    font-weight: 400;
}
.text-component.instance-4 a {
    text-decoration: underline;
}
.text-component.instance-4 a:hover {
    text-decoration: none;
}
.text-component.instance-4 span.p:nth-child(n + 2) {
    margin-top: 1rem;
}

/* Escríbame en Left Subtitle */
.text-component.instance-3 {
    color: #FFFFFF;
    font-family: 'Kulim Park', sans-serif;
    font-size: 1em;
    line-height: 1.5;
    font-weight: 300;
}
.text-component.instance-3 a {
    text-decoration: underline;
}
.text-component.instance-3 a:hover {
    text-decoration: none;
}
.text-component.instance-3 span.p:nth-child(n + 2) {
    margin-top: 1rem;
}

/* Eugene Kirshin Right Header */
.text-component.instance-1 {
    text-align: right;
    color: #FFFFFF;
    font-family: 'Lato', sans-serif;
    letter-spacing: -0.05rem;
    width: 100%;
    font-size: 2.25em;
    line-height: 1.125;
    font-weight: 400;
}
.text-component.instance-1 a {
    text-decoration: underline;
}
.text-component.instance-1 a:hover {
    text-decoration: none;
}
.text-component.instance-1 span.p:nth-child(n + 2) {
    margin-top: 1rem;
}

/* Press the button... Right Subtitle */
.text-component.instance-2 {
    text-align: right;
    color: #FFFFFF;
    font-family: 'Kulim Park', sans-serif;
    font-size: 1em;
    line-height: 1.5;
    font-weight: 300;
}
.text-component.instance-2 a {
    text-decoration: underline;
}
.text-component.instance-2 a:hover {
    text-decoration: none;
}
.text-component.instance-2 span.p:nth-child(n + 2) {
    margin-top: 1rem;
}

/* 8. Icons List and Round Buttons */
.icons-component {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--flex-alignment);
    letter-spacing: 0;
    padding: 0;
}

.icons-component > li {
    position: relative;
    z-index: 1;
}

.icons-component > li > a {
    align-items: center;
    display: flex;
    justify-content: center;
}

.icons-component > li > a > svg {
    display: block;
    pointer-events: none;
    position: relative;
}

.icons-component > li > a + svg {
    display: block;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.icons-component > li > a > .label {
    display: none;
}

/* Circle design & standard turquoise colors */
.icons-component.instance-1 {
    font-size: 1.375em;
    gap: 1.25rem;
}

.icons-component.instance-1:not(:first-child) {
    margin-top: 1.625rem !important;
}

.icons-component.instance-1:not(:last-child) {
    margin-bottom: 1.625rem !important;
}

.icons-component.instance-1 > li > a {
    border-radius: 100%;
    height: 2em;
    width: 2em;
    border: solid 1px rgba(255,255,255,0.459);
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.icons-component.instance-1 > li > a > svg {
    height: 60%;
    width: 60%;
    fill: #1EF7D0; /* Original bright turquoise */
    transition: fill 0.25s ease;
}

.icons-component.instance-1 > li > a + svg {
    transition: fill 0.25s ease, stroke 0.25s ease;
}

/* WhatsApp Hover Styles (Green brand accent) */
.icons-component.instance-1 > li > a.n01 > svg {
    fill: #25D366;
}
.icons-component.instance-1 > li > a.n01:hover {
    border-color: #128C7E !important;
}
.icons-component.instance-1 > li > a.n01:hover > svg {
    fill: #128C7E !important;
}

/* Telegram Hover Styles (Blue brand accent) */
.icons-component.instance-1 > li > a.n02 > svg {
    fill: #0088CC;
}
.icons-component.instance-1 > li > a.n02:hover {
    border-color: #2AA5EB !important;
}
.icons-component.instance-1 > li > a.n02:hover > svg {
    fill: #2AA5EB !important;
}

/* Messenger Hover Styles (Dark blue brand accent) */
.icons-component.instance-1 > li > a.n03 > svg {
    fill: rgba(15,106,242,0.929);
}
.icons-component.instance-1 > li > a.n03:hover {
    border-color: #3B5998 !important;
}
.icons-component.instance-1 > li > a.n03:hover > svg {
    fill: #3B5998 !important;
}

/* Email Hover Styles (Cyan-sky brand accent) */
.icons-component.instance-1 > li > a.n04 > svg {
    fill: #74D2E7;
}
.icons-component.instance-1 > li > a.n04:hover {
    border-color: #48A9C5 !important;
}
.icons-component.instance-1 > li > a.n04:hover > svg {
    fill: #48A9C5 !important;
}



/* ==========================================================================
   10. MINIMALISTIC TEXT-BASED LANGUAGE SWITCHER WITH UNDERLINE
   ========================================================================== */
.title-switcher-wrapper {
    display: flex;
    align-items: flex-start; /* Align by top edge */
    justify-content: space-between; /* Name to far left, switcher to far right */
    width: 100%;
}

#lang-switcher {
    display: flex;
    gap: 1.25rem; /* Elegant gap between languages */
    align-items: flex-start;
    position: relative;
    z-index: 100;
    margin-top: 0.8em; /* Optical alignment to match the top of lowercase letters (x-height), like "вгений" */
    
    /* Fade-in reveal sync with Carrd onload flow */
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.8s ease 0.25s, transform 0.8s ease 0.25s;
}

body.is-ready #lang-switcher,
body.is-playing #lang-switcher {
    opacity: 1;
    transform: translateY(0);
}

.lang-link {
    font-family: 'Kulim Park', sans-serif;
    font-size: 1em; /* Size matching "Escríbame en" exactly */
    font-weight: 300; /* Font weight matching "Escríbame en" exactly */
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4); /* text-on-surface/40 default */
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.lang-link:hover {
    color: rgba(255, 255, 255, 0.95);
}

.lang-link.lang-active {
    color: #ffffff;
}

/* Language indicator underline */
.lang-link.lang-active::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ffffff;
}

/* ==========================================================================
   11. MEDIA QUERIES (Adaptive responsive behavior)
   ========================================================================== */

@media (max-width: 1920px) {}

@media (max-width: 1680px) {
    html {
        font-size: 13pt;
    }
}

@media (max-width: 1280px) {
    html {
        font-size: 13pt;
    }
}

@media (max-width: 1024px) {}

@media (max-width: 980px) {
    html {
        font-size: 11pt;
    }
}

/* Mobile responsive stacked layout */
@media (max-width: 736px) {
    html {
        font-size: 11pt;
    }
    
    .site-wrapper {
        padding: 2rem 2rem 2rem 2rem;
    }
    
    .site-main > .inner {
        --padding-horizontal: 1.75rem;
        --padding-vertical: 2.375rem;
        --spacing: 0rem;
    }
    
    .container-component.columns01 {
        --alignment: center;
        --flex-alignment: center;
        --indent-left: 1;
        --indent-right: 1;
        --margin-left: auto;
        --margin-right: auto;
    }
    
    .container-component.columns01 > .wrapper > .inner {
        --gutters: 1.5rem;
        --padding-horizontal: 0rem;
        --padding-vertical: 0rem;
        --spacing: 1rem;
    }
    
    /* Eugenio / Eugene positions stagger and text aligns mobile-center */
    .text-component.instance-4 {
        letter-spacing: -0.04375rem;
        width: 100%;
        font-size: 2.25em;
        line-height: 1.125;
        text-align: center;
    }
    
    .text-component.instance-3 {
        letter-spacing: 0rem;
        width: 100%;
        font-size: 1em;
        line-height: 1.5;
        text-align: center;
    }
    
    .text-component.instance-1 {
        letter-spacing: -0.04375rem;
        width: 100%;
        font-size: 2.25em;
        line-height: 1.125;
        text-align: center;
    }
    
    .text-component.instance-2 {
        letter-spacing: 0rem;
        width: 100%;
        font-size: 1em;
        line-height: 1.5;
        text-align: center;
    }
    
    .icons-component.instance-1 {
        font-size: 1.375em;
        gap: 1.25rem;
        justify-content: center;
    }
    
    .icons-component.instance-1:not(:first-child) {
        margin-top: 1.21875rem !important;
    }
    
    .icons-component.instance-1:not(:last-child) {
        margin-bottom: 1.21875rem !important;
    }
    
    /* Center title and switcher on mobile */
    .title-switcher-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    #lang-switcher {
        margin: 0.25rem 0 0.5rem 0;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .site-wrapper {
        padding: 1rem 1rem 1rem 1rem;
    }
    .site-main > .inner {
        --spacing: 0rem;
    }
    .container-component.columns01 > .wrapper > .inner {
        --spacing: 0.875rem;
    }
}

@media (max-width: 360px) {
    .site-wrapper {
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    }
    .site-main > .inner {
        --padding-horizontal: 1.3125rem;
        --padding-vertical: 1.78125rem;
        --spacing: 0rem;
    }
    .container-component.columns01 > .wrapper > .inner {
        --gutters: 1.5rem;
        --padding-horizontal: 0rem;
        --padding-vertical: 0rem;
        --spacing: 0.75rem;
    }
    .text-component.instance-4 {
        font-size: 2em;
    }
    .text-component.instance-3 {
        font-size: 1em;
    }
    .text-component.instance-1 {
        font-size: 2em;
    }
    .text-component.instance-2 {
        font-size: 1em;
    }
    .icons-component.instance-1 {
        gap: 0.9375rem;
    }
}