/* ============================================================
   SIEMCIA — Home page visual system
   Concept: the page borrows its materials from the product itself —
   printed comprobantes, ink stamps ("sellos"), ledger rulings and
   perforated receipt stubs — instead of a generic SaaS look.
   Loaded only on index.php, on top of the existing Techwix theme.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
    --c-paper:      #FAF8F3;
    --c-paper-alt:  #F1ECDF;
    --c-ink:        #1C2127;
    --c-ink-soft:   #52586A;
    --c-line:       #DCD3BC;
    --c-stamp:      #A8362B;
    --c-stamp-dark: #7C2721;
    --c-teal:       #0E5C52;
    --c-teal-dark:  #0A423B;
    --c-teal-lt:    #E3F0EC;
    --c-gold:       #B4832E;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'IBM Plex Sans', Arial, sans-serif;
    --font-mono:    'IBM Plex Mono', 'Courier New', monospace;
}

/* stray SEO heading that sits above the hero with no styling of its own —
   keep it in the DOM for accessibility/SEO, remove it visually */
.main-wrapper > h1{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

/* ---------- base type on this page only ---------- */
body{
    font-family: var(--font-body);
    color: var(--c-ink);
}

h1, h2, h3, .title, .sub-title, .hero-content .title1{
    font-family: var(--font-display);
}

/* ---------- header: quiet, paper-toned ---------- */
#header.header-section{
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-line);
}
#header .main-menu > li > a{
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--c-ink-soft);
}
#header .main-menu > li.active-menu > a,
#header .main-menu > li > a:hover{
    color: var(--c-stamp);
}
.header-btn .btn{
    background: var(--c-ink);
    border-radius: 3px;
    font-family: var(--font-body);
}
.header-btn .btn:hover{ background: var(--c-stamp); }

/* ============================================================
   HERO
   ============================================================ */
.techwix-hero-section-03{
    position: relative;
    background-color: var(--c-ink) !important;
    background-blend-mode: multiply;
    overflow: hidden;
}
.techwix-hero-section-03::before{
    /* faint ledger ruling across the hero, like paper under the ink */
    content:"";
    position:absolute; inset:0;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0, transparent 38px,
        rgba(250,248,243,.05) 39px
    );
    pointer-events:none;
}
.techwix-hero-section-03::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(115deg, rgba(15,17,22,.88) 20%, rgba(15,17,22,.55) 65%, rgba(15,17,22,.35));
    pointer-events:none;
}
.techwix-hero-section-03 .container{ position:relative; z-index:2; }

.techwix-hero-section-03 .hero-content h1.title1{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(34px, 4.4vw, 54px);
    line-height: 1.15;
    color: #fff;
    letter-spacing: -.01em;
}
.techwix-hero-section-03 .hero-content h1.title1 .accent-word{
    color: #E7C88A;
    font-style: italic;
}
.techwix-hero-section-03 .hero-content p.sub-title1{
    font-family: var(--font-body);
    color: rgba(255,255,255,.78);
    font-size: 16px;
    line-height: 1.75;
}
.techwix-hero-section-03 .hero-content p.sub-title1 strong{ color:#fff; }

/* stamp badge — the signature element of this design:
   a rotated "sello de conformidad" like the ones printed
   on validated comprobantes */
.hero-stamp{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    border: 2px solid var(--c-stamp);
    box-shadow: 0 0 0 4px rgba(168,54,43,.15);
    transform: rotate(-11deg);
    color: var(--c-stamp);
    font-family: var(--font-mono);
    text-align: center;
    margin-bottom: 26px;
    background: rgba(168,54,43,.06);
}
.hero-stamp span{
    display:block;
    font-size: 9.5px;
    letter-spacing: .12em;
    line-height: 1.5;
    text-transform: uppercase;
}
.hero-stamp .hero-stamp__big{
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    margin: 2px 0;
}

.hero-cta{
    display:flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.btn-hero{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 13px 26px;
    border-radius: 3px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .01em;
    transition: all .2s ease;
    cursor: pointer;
}
.btn-hero--primary{
    background: var(--c-stamp);
    color: #fff;
}
.btn-hero--primary:hover{
    background: var(--c-stamp-dark);
    color:#fff;
    transform: translateY(-2px);
}
.btn-hero--ghost{
    border: 1.5px solid rgba(255,255,255,.35);
    color: #fff;
}
.btn-hero--ghost i{ color:#25D366; font-size:17px; }
.btn-hero--ghost:hover{
    border-color: #25D366;
    background: rgba(37,211,102,.12);
    color:#fff;
}

.hero-illustration{
    filter: drop-shadow(0 22px 40px rgba(0,0,0,.35));
    animation: hero-float 5s ease-in-out infinite;
}
.hero-illustration svg{ width: 100%; height: auto; display: block; }
@keyframes hero-float{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce){
    .hero-illustration{ animation: none; }
}

/* ============================================================
   SERVICE SECTION — two core value props, treated as cards
   cut from the same "paper" with a torn/stub top edge
   ============================================================ */
.techwix-service-section-03{
    background-color: var(--c-paper) !important;
    background-blend-mode: normal;
}
.techwix-service-section-03 .service-item-03{
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 4px;
    padding: 40px 36px 34px;
    position: relative;
    transition: box-shadow .25s ease, transform .25s ease;
}
.techwix-service-section-03 .service-item-03::before{
    content:"";
    position:absolute; top:0; left:28px; right:28px; height:2px;
    background: repeating-linear-gradient(to right, var(--c-line) 0 6px, transparent 6px 12px);
}
.techwix-service-section-03 .service-item-03:hover{
    box-shadow: 0 14px 34px rgba(28,33,39,.08);
    transform: translateY(-3px);
}
.techwix-service-section-03 .service-icon-inline{
    width: 60px; height: 60px;
    display:flex; align-items:center; justify-content:center;
    border-radius: 50%;
    background: var(--c-teal-lt);
}
.techwix-service-section-03 .service-icon-inline svg{
    width: 32px; height: 32px;
}
.techwix-service-section-03 .service-content .title{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    margin: 18px 0 12px;
}
.techwix-service-section-03 .service-content .title a{ color: var(--c-ink); }
.techwix-service-section-03 .service-content p{
    color: var(--c-ink-soft);
    font-size: 14.5px;
    line-height: 1.9;
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.techwix-about-section-04{
    background: var(--c-paper-alt) !important;
    position: relative;
}
.techwix-about-section-04 .section-title .title{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(26px, 3vw, 36px);
    color: var(--c-ink);
}
.techwix-about-section-04 .about-content-wrap p.text{
    color: var(--c-ink-soft);
    font-size: 15.5px;
    line-height: 1.9;
}

.about-img-wrap--framed .about-img-big{
    border: 6px solid #fff;
    box-shadow: 0 18px 40px rgba(28,33,39,.14);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.about-img-badge{
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    background: var(--c-ink);
    color: #fff;
    border-radius: 4px;
    padding: 10px 16px;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(28,33,39,.25);
}
.about-img-badge__num{
    display:block;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 16px;
    color: #E7C88A;
}
.about-img-badge__label{
    display:block;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
}

/* receipt-stub contact card: perforated top edge like a torn ticket */
.about-author-info-wrap{
    background:#fff;
    border: 1px solid var(--c-line);
    border-radius: 4px;
    padding: 28px 26px 24px;
    margin-top: 28px;
    position: relative;
    display:block;
}
.about-author-info-wrap::before{
    content:"";
    position:absolute;
    top:-1px; left:0; right:0; height:1px;
    background-image: radial-gradient(circle, var(--c-paper-alt) 3px, transparent 3.2px);
    background-size: 14px 14px;
    background-position: center top;
}
.about-author-info-wrap .about-author{
    display:flex; align-items:center; gap:10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--c-line);
}
.about-author-info-wrap .about-author img{ height:26px; width:auto; }
.about-author-info-wrap .about-author .name{
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--c-ink-soft);
}
.about-info .hola{
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--c-ink);
    margin-bottom: 4px;
}
.about-info p{ color: var(--c-ink-soft); font-size: 14px; }
.about-info .number{
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 26px;
    color: var(--c-teal);
    letter-spacing: .02em;
    margin: 6px 0;
}

/* ============================================================
   SKILL / EXPERIENCE SECTION
   ============================================================ */
.techwix-skill-section-02{
    background: #fff !important;
}
.techwix-skill-section-02 .section-title .title{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px, 2.8vw, 32px);
}
.experience-wrap{
    display:flex; align-items:flex-start; gap: 22px;
    border-top: 1px solid var(--c-line);
    padding-top: 22px;
    margin-top: 22px;
}
.experience .number{
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 54px;
    color: var(--c-stamp);
    line-height: 1;
}
.experience-text p{ color: var(--c-ink-soft); font-size: 14.5px; line-height: 1.85; }

.skill-item .title{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--c-ink);
}
.skill-item .bar-inner{ background: var(--c-paper-alt); }
.skill-item .bar.progress-line{ background: var(--c-teal) !important; }
.skill-item .skill-percent{ font-family: var(--font-mono); }

/* ============================================================
   BRAND STRIP
   ============================================================ */
.techwix-brand-section-03{ background: var(--c-paper) !important; }
.techwix-brand-section-03 .title{
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--c-ink);
    margin-bottom: 44px;
}

/* continuous infinite scroll, like the client-logo strip on vsi.com.pe —
   built in plain CSS so it doesn't depend on the theme's Swiper init */
.brand-marquee{
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.brand-marquee__track{
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    animation: brand-marquee-scroll 26s linear infinite;
}
.brand-marquee:hover .brand-marquee__track{
    animation-play-state: paused;
}
.brand-marquee__item{ flex: 0 0 auto; }
.brand-marquee__item img{
    height: 100px;
    width: auto;
    filter: grayscale(1) opacity(.55);
    transition: filter .25s ease;
}
.brand-marquee__item img:hover{ filter: grayscale(0) opacity(1); }

@keyframes brand-marquee-scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
    .brand-marquee__track{ animation: none; }
}
@media (max-width: 767px){
    .brand-marquee__track{ gap: 60px; }
    .brand-marquee__item img{ height: 40px; }
}

/* ============================================================
   SECTION DIVIDER — the same "torn ticket" perforation used on
   the WhatsApp receipt card, reused to stitch sections together
   ============================================================ */
.section-divider--perforated{
    height: 1px;
    background-image: radial-gradient(circle, var(--c-line) 2.5px, transparent 2.6px);
    background-size: 16px 1px;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    z-index: 3;
}

/* ============================================================
   ACCESSIBILITY — visible keyboard focus on interactive elements
   ============================================================ */
.btn-hero:focus-visible,
.hero-stamp:focus-visible,
.service-item-03 a:focus-visible,
.plan-cta:focus-visible,
a:focus-visible,
button:focus-visible{
    outline: 2px solid var(--c-teal);
    outline-offset: 2px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px){
    .hero-stamp{ width: 96px; height: 96px; }
    .experience-wrap{ flex-direction: column; }
}