/* MIXED CSS PACK */
/* Template: herreriasanmartin.com.ar/index.html */
/* Template mtime: 2026-04-22 11:31:02 */

/* external link (no embedded): https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Outfit:wght@600;700;800&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css */

/* ===== INLINE <style> BLOCK #1 ===== */
/* ── TOKENS ─────────────────────────────────── */
    :root{
      --accent:#c42329;
      --accent-strong:#a61d22;
      --accent-glow:rgba(196,35,41,.18);
      --ink:#0d0e10;
      --ink-2:#1c1d21;
      --muted:#666a75;
      --muted-light:#9295a0;
      --line:#e5e6ea;
      --soft:#f5f6f8;
      --soft-2:#fafafb;
      --card:#ffffff;
      --shadow-xs:0 2px 8px rgba(11,17,34,.05);
      --shadow-sm:0 8px 28px rgba(11,17,34,.07);
      --shadow-md:0 18px 48px rgba(11,17,34,.09);
      --shadow-lg:0 32px 80px rgba(11,17,34,.11);
      --radius-xl:36px;
      --radius-lg:24px;
      --radius-md:16px;
      --radius-sm:10px;
      --nav-h:80px;
      --container:1240px;
      --transition:.28s cubic-bezier(.22,1,.36,1);
    }

    /* ── RESET & BASE ───────────────────────────── */
    *, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
    body{
      font-family:'DM Sans',system-ui,sans-serif;
      color:var(--ink);
      background:#fff;
      overflow-x:hidden;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    .container-xl{max-width:var(--container);margin-inline:auto;padding-inline:clamp(18px,4vw,48px)}

    /* ── EYEBROW ────────────────────────────────── */
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 14px 8px 10px;
      border-radius:999px;
      background:rgba(196,35,41,.08);
      color:var(--accent);
      font-size:.72rem;
      font-weight:700;
      letter-spacing:.16em;
      text-transform:uppercase;
      margin-bottom:20px;
    }
    .eyebrow-dot{
      width:7px;height:7px;
      border-radius:50%;
      background:var(--accent);
      flex-shrink:0;
      animation:pulse-dot 2.4s ease infinite;
    }
    @keyframes pulse-dot{
      0%,100%{box-shadow:0 0 0 0 rgba(196,35,41,.38)}
      50%{box-shadow:0 0 0 6px rgba(196,35,41,0)}
    }

    /* ── SECTION ────────────────────────────────── */
    .section{padding:clamp(72px,10vw,120px) 0;position:relative}
    .section-soft{background:var(--soft-2)}
    .section-title{
      font-family:'Outfit',sans-serif;
      font-size:clamp(1.75rem,3.2vw,2.95rem);
      font-weight:800;
      line-height:.97;
      letter-spacing:-.03em;
      color:var(--ink);
      margin-bottom:18px;
    }
    .section-subtitle{
      color:var(--muted);
      font-size:1.06rem;
      line-height:1.85;
      max-width:720px;
    }
    .section-head{margin-bottom:56px}
    .section-head.center{text-align:center}
    .section-head.center .section-subtitle{margin-inline:auto}

    /* ── BUTTONS ────────────────────────────────── */
    .btn-main,.btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:54px;
      padding:0 28px;
      border-radius:999px;
      font-weight:600;
      font-size:.97rem;
      letter-spacing:-.01em;
      transition:var(--transition);
      border:none;
      cursor:pointer;
      position:relative;
      overflow:hidden;
    }
    .btn-main{
      background:var(--accent);
      color:#fff;
      box-shadow:0 12px 32px rgba(196,35,41,.28),0 4px 10px rgba(196,35,41,.14);
    }
    .btn-main::after{
      content:'';
      position:absolute;inset:0;
      background:linear-gradient(120deg,rgba(255,255,255,.22) 0%,transparent 60%);
      pointer-events:none;
    }
    .btn-main:hover{
      background:var(--accent-strong);
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 18px 40px rgba(196,35,41,.34),0 4px 12px rgba(196,35,41,.18);
    }
    .btn-ghost{
      background:#fff;
      color:var(--ink);
      border:1.5px solid var(--line);
      box-shadow:var(--shadow-xs);
    }
    .btn-ghost:hover{
      color:var(--accent);
      border-color:rgba(196,35,41,.28);
      transform:translateY(-2px);
      box-shadow:var(--shadow-sm);
    }
    .btn-sm{min-height:44px;padding:0 20px;font-size:.9rem}

    /* ══════════════════════════════════════════════
       NAVBAR
    ══════════════════════════════════════════════ */
    .navbar{
      position:fixed;top:0;left:0;right:0;z-index:1000;
      height:var(--nav-h);
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(20px) saturate(180%);
      -webkit-backdrop-filter:blur(20px) saturate(180%);
      border-bottom:1px solid rgba(18,18,22,.07);
      transition:var(--transition);
    }
    .navbar.scrolled{
      box-shadow:0 4px 24px rgba(11,17,34,.06);
      background:rgba(255,255,255,.96);
    }
    .nav-inner{
      height:var(--nav-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }
    .nav-brand{
      display:flex;align-items:center;gap:11px;
      font-family:'Outfit',sans-serif;
      font-size:.92rem;
      font-weight:700;
      color:var(--ink);
      line-height:1.2;
      flex-shrink:1;
      min-width:0;
      max-width:calc(100% - 72px);
    }
    .nav-brand span{display:block}
    .nav-brand img{height:36px;width:auto;object-fit:contain;flex-shrink:0}
    .nav-links{
      display:flex;align-items:center;gap:4px;
      list-style:none;
    }
    .nav-links a{
      display:block;
      padding:8px 14px;
      border-radius:999px;
      font-size:.92rem;
      font-weight:500;
      color:var(--ink-2);
      transition:.2s ease;
    }
    .nav-links a:hover{color:var(--accent);background:rgba(196,35,41,.06)}
    .nav-right{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0}
    .nav-toggle{
      display:none;
      width:42px;height:42px;
      border-radius:12px;
      border:1.5px solid var(--line);
      background:#fff;
      cursor:pointer;
      align-items:center;justify-content:center;
      flex-direction:column;gap:5px;
      box-shadow:var(--shadow-xs);
      flex-shrink:0;
      position:relative;
      z-index:1001;
    }
    .nav-toggle span{
      display:block;width:20px;height:2px;
      background:var(--ink);
      border-radius:2px;
      transition:.25s ease;
    }
    /* Mobile nav */
    .nav-mobile{
      display:block;
      position:fixed;top:var(--nav-h);left:0;right:0;
      background:rgba(255,255,255,.98);
      backdrop-filter:blur(20px);
      border-bottom:1px solid var(--line);
      padding:16px 24px 24px;
      z-index:999;
      box-shadow:var(--shadow-md);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translateY(-10px);
      transition:opacity .24s ease, transform .24s ease, visibility .24s ease;
      max-height:calc(100vh - var(--nav-h));
      overflow-y:auto;
    }
    .nav-mobile.open{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translateY(0);
    }
    .nav-mobile .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:2px}
    .nav-mobile .nav-links a{border-radius:14px;padding:13px 16px}
    .nav-mobile .btn-main{width:100%;margin-top:12px;justify-content:center}
    body.nav-open{overflow:hidden}

    /* ══════════════════════════════════════════════
       HERO
    ══════════════════════════════════════════════ */
    .hero{
      padding-top:calc(var(--nav-h) + clamp(52px,8vw,96px));
      padding-bottom:clamp(72px,10vw,128px);
      background:#fff;
      position:relative;
      overflow:hidden;
    }
    /* decorative background shapes */
    .hero::before{
      content:'';
      position:absolute;
      top:-120px;right:-200px;
      width:700px;height:700px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(196,35,41,.07) 0%,transparent 72%);
      pointer-events:none;
    }
    .hero::after{
      content:'';
      position:absolute;
      bottom:-60px;left:-80px;
      width:460px;height:460px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(196,35,41,.04) 0%,transparent 70%);
      pointer-events:none;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1fr 480px;
      gap:clamp(40px,6vw,80px);
      align-items:center;
      position:relative;z-index:1;
    }
    /* LEFT copy */
    .hero-label{
      display:inline-flex;align-items:center;gap:8px;
      margin-bottom:28px;
      font-size:.8rem;font-weight:600;
      letter-spacing:.14em;text-transform:uppercase;
      color:var(--muted);
    }
    .hero-label-line{width:36px;height:1.5px;background:var(--accent);flex-shrink:0}
    .hero-h1{
      font-family:'Outfit',sans-serif;
      font-size:clamp(2.15rem,4.4vw,3.9rem);
      font-weight:800;
      line-height:.94;
      letter-spacing:-.04em;
      color:var(--ink);
      margin-bottom:26px;
    }
    .hero-h1 em{
      font-style:normal;
      color:var(--accent);
    }
    .hero-desc{
      color:var(--muted);
      font-size:1.07rem;
      line-height:1.88;
      max-width:580px;
      margin-bottom:36px;
    }
    .hero-tags{
      display:flex;flex-wrap:wrap;gap:10px;
      margin-bottom:40px;
    }
    .hero-tag{
      display:inline-flex;align-items:center;gap:7px;
      padding:9px 16px;
      background:#fff;
      border:1.5px solid var(--line);
      border-radius:999px;
      font-size:.88rem;
      font-weight:600;
      color:var(--ink-2);
      box-shadow:var(--shadow-xs);
      transition:.2s ease;
    }
    .hero-tag:hover{border-color:rgba(196,35,41,.24);color:var(--accent)}
    .hero-tag-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:48px}
    /* stats strip */
    .hero-stats{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:0;
      border:1.5px solid var(--line);
      border-radius:var(--radius-md);
      overflow:hidden;
      background:#fff;
      box-shadow:var(--shadow-sm);
    }
    .hero-stat{
      padding:18px 16px;
      border-right:1.5px solid var(--line);
      position:relative;
    }
    .hero-stat:last-child{border-right:none}
    .hero-stat-label{
      font-size:.72rem;font-weight:600;
      letter-spacing:.12em;text-transform:uppercase;
      color:var(--muted-light);
      margin-bottom:7px;
      display:block;
    }
    .hero-stat-value{
      font-family:'Outfit',sans-serif;
      font-size:.98rem;
      font-weight:700;
      color:var(--ink);
      line-height:1.2;
    }

    /* RIGHT image */
    .hero-visual{position:relative}
    .hero-frame{
      position:relative;
      border-radius:var(--radius-xl);
      overflow:hidden;
      background:linear-gradient(180deg,#ffffff 0%,#f6f7f9 100%);
      border:1.5px solid var(--line);
      box-shadow:var(--shadow-lg);
      aspect-ratio:1/1.05;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:clamp(18px,3vw,34px);
    }
    .hero-frame img{
      width:100%;
      height:100%;
      object-fit:contain;
      object-position:center;
      display:block;
    }
    .hero-visual--mobile{display:none}
    /* floating badge */
    .hero-badge{
      position:absolute;
      bottom:-20px;left:-24px;
      background:#fff;
      border:1.5px solid var(--line);
      border-radius:20px;
      padding:16px 20px;
      box-shadow:var(--shadow-md);
      display:flex;align-items:center;gap:14px;
      min-width:220px;
      z-index:2;
    }
    .hero-badge-icon{
      width:46px;height:46px;
      border-radius:13px;
      background:rgba(196,35,41,.1);
      display:grid;place-items:center;
      color:var(--accent);
      flex-shrink:0;
    }
    .hero-badge-icon svg{width:22px;height:22px}
    .hero-badge strong{display:block;font-size:.9rem;font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
    .hero-badge span{font-size:.8rem;color:var(--muted);line-height:1.4}
    /* top floating chip */
    .hero-chip{
      position:absolute;
      top:-18px;right:-18px;
      background:var(--accent);
      color:#fff;
      border-radius:16px;
      padding:12px 18px;
      font-size:.82rem;font-weight:700;
      box-shadow:0 12px 28px rgba(196,35,41,.28);
      z-index:2;
      letter-spacing:-.01em;
    }

    /* ══════════════════════════════════════════════
       QUIÉNES SOMOS
    ══════════════════════════════════════════════ */
    .about-wrap{
      display:grid;
      grid-template-columns:1fr 400px;
      gap:clamp(32px,5vw,72px);
      align-items:center;
    }
    .about-copy p{
      color:var(--muted);
      font-size:1.04rem;
      line-height:1.88;
      margin-bottom:24px;
    }
    .about-copy p:last-child{margin-bottom:0}
    .about-note{
      display:inline-flex;align-items:center;gap:9px;
      padding:10px 14px;
      border-radius:12px;
      background:var(--soft);
      border:1.5px solid var(--line);
      font-size:.86rem;color:var(--muted);
      margin-top:8px;
    }
    .about-note::before{
      content:'';width:7px;height:7px;
      border-radius:50%;background:var(--accent);flex-shrink:0;
    }
    .about-cards{display:grid;gap:14px}
    .about-card{
      padding:24px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1.5px solid var(--line);
      box-shadow:var(--shadow-sm);
      transition:var(--transition);
      position:relative;
      overflow:hidden;
    }
    .about-card::before{
      content:'';
      position:absolute;left:0;top:0;bottom:0;
      width:3px;
      background:var(--accent);
      transform:scaleY(0);
      transform-origin:bottom;
      transition:var(--transition);
    }
    .about-card:hover{transform:translateX(4px);border-color:rgba(196,35,41,.2)}
    .about-card:hover::before{transform:scaleY(1)}
    .about-card strong{
      display:block;
      font-family:'Outfit',sans-serif;
      font-size:1rem;
      font-weight:700;
      margin-bottom:8px;
      color:var(--ink);
    }
    .about-card span{
      display:block;
      color:var(--muted);
      font-size:.93rem;
      line-height:1.72;
    }

    /* ══════════════════════════════════════════════
       SERVICIOS
    ══════════════════════════════════════════════ */
    .services-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
    }
    .service-card{
      position:relative;
      padding:32px 28px;
      background:#fff;
      border:1.5px solid var(--line);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-sm);
      transition:var(--transition);
      overflow:hidden;
      display:flex;flex-direction:column;
    }
    .service-card-accent{
      position:absolute;inset:0 auto auto 0;
      width:100%;height:3px;
      background:linear-gradient(90deg,var(--accent) 0%,transparent 100%);
      transform:scaleX(0);
      transform-origin:left;
      transition:var(--transition);
    }
    .service-card:hover{
      transform:translateY(-6px);
      box-shadow:var(--shadow-md);
      border-color:rgba(196,35,41,.18);
    }
    .service-card:hover .service-card-accent{transform:scaleX(1)}
    .icon-wrap{
      width:60px;height:60px;
      border-radius:17px;
      display:grid;place-items:center;
      background:rgba(196,35,41,.07);
      color:var(--accent);
      margin-bottom:22px;
      transition:var(--transition);
      flex-shrink:0;
    }
    .service-card:hover .icon-wrap{background:rgba(196,35,41,.13);transform:scale(1.06)}
    .icon-wrap svg{width:28px;height:28px}
    .service-card h3{
      font-family:'Outfit',sans-serif;
      font-size:1.08rem;
      font-weight:700;
      letter-spacing:-.025em;
      margin-bottom:12px;
      color:var(--ink);
    }
    .service-card p{
      color:var(--muted);
      font-size:.96rem;
      line-height:1.78;
      flex:1;
    }

    /* ══════════════════════════════════════════════
       POR QUÉ ELEGIRNOS
    ══════════════════════════════════════════════ */
    .choose-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      margin-bottom:40px;
    }
    .choose-card{
      padding:28px 24px;
      background:#fff;
      border:1.5px solid var(--line);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-sm);
      transition:var(--transition);
      position:relative;
      overflow:hidden;
    }
    .choose-card::after{
      content:'';
      position:absolute;
      bottom:-40px;right:-40px;
      width:100px;height:100px;
      border-radius:50%;
      background:rgba(196,35,41,.05);
      transition:var(--transition);
    }
    .choose-card:hover{
      transform:translateY(-5px);
      border-color:rgba(196,35,41,.18);
      box-shadow:var(--shadow-md);
    }
    .choose-card:hover::after{transform:scale(2.4);opacity:.6}
    .choose-card .icon-wrap{margin-bottom:18px}
    .choose-card h3{
      font-family:'Outfit',sans-serif;
      font-size:1rem;font-weight:700;
      letter-spacing:-.02em;
      margin-bottom:10px;color:var(--ink);
    }
    .choose-card p{color:var(--muted);font-size:.93rem;line-height:1.76}

    /* CTA band */
    .cta-band{
      background:linear-gradient(135deg,#0f1012 0%,#1e2028 100%);
      border-radius:28px;
      padding:clamp(24px,4vw,36px) clamp(24px,5vw,48px);
      display:flex;align-items:center;
      justify-content:space-between;
      gap:24px;flex-wrap:wrap;
      box-shadow:0 24px 60px rgba(11,17,34,.18);
      position:relative;overflow:hidden;
    }
    .cta-band::before{
      content:'';
      position:absolute;top:-60px;right:-80px;
      width:340px;height:340px;border-radius:50%;
      background:radial-gradient(circle,rgba(196,35,41,.14) 0%,transparent 70%);
      pointer-events:none;
    }
    .cta-band-copy strong{
      display:block;
      font-family:'Outfit',sans-serif;
      font-size:1.25rem;font-weight:800;
      letter-spacing:-.03em;
      color:#fff;margin-bottom:8px;
    }
    .cta-band-copy p{
      margin:0;color:rgba(255,255,255,.68);
      font-size:.97rem;line-height:1.76;
    }

    /* ══════════════════════════════════════════════
       GALERÍA — SE CONSERVA INTACTA (sólo ajuste
       de contenedor para coherencia de layout)
    ══════════════════════════════════════════════ */
    .gal-card{
      background:#fff;
      border:1.5px solid var(--line);
      border-radius:var(--radius-xl);
      padding:clamp(22px,3vw,36px);
      box-shadow:var(--shadow-sm);
    }
    .gal-gallery .carousel{max-width:1100px;margin-inline:auto;position:relative}
    .gal-frame{
      height:clamp(280px,56vh,560px);
      background:linear-gradient(180deg,#ffffff 0%,#f6f7f9 100%);
      border-radius:28px;
      overflow:hidden;
      border:1px solid rgba(18,18,20,.07);
      box-shadow:0 24px 50px rgba(11,17,34,.08);
      display:flex;align-items:center;justify-content:center;
      padding:16px;
    }
    .gal-img{
      width:auto!important;max-width:100%;
      height:auto!important;max-height:100%;
      object-fit:contain!important;object-position:center;
      display:block;cursor:zoom-in;
      border-radius:18px;
    }
    .gal-gallery .carousel-control-prev,
    .gal-gallery .carousel-control-next{
      z-index:20;width:56px;height:56px;
      top:50%;transform:translateY(-50%);
      opacity:1;background:rgba(17,18,22,.72);
      border-radius:50%;margin:0 10px;transition:.25s ease;
    }
    .gal-gallery .carousel-control-prev:hover,
    .gal-gallery .carousel-control-next:hover{background:rgba(196,35,41,.92)}
    .gal-gallery .carousel-control-prev{left:0}
    .gal-gallery .carousel-control-next{right:0}
    .gal-gallery .gal-ctrl-icon{width:2.75rem;height:2.75rem;background-size:58% 58%}
    .gal-gallery .carousel-indicators{z-index:10;bottom:-56px;margin-bottom:0}
    .gal-gallery .carousel-indicators button{
      width:12px;height:12px;border-radius:50%;border:none;
      background:rgba(17,18,22,.22);opacity:1;margin:0 5px;
    }
    .gal-gallery .carousel-indicators button.active{background:var(--accent)}
    .gal-gallery{padding-bottom:60px}
    #galLightbox .modal-dialog{padding:0 12px}
    #galLightbox .modal-content{background:#000;border:none;border-radius:24px;overflow:hidden}
    #galLightboxImg{width:100%;max-height:86vh;height:auto;object-fit:contain;background:#000}
    .gal-lightbox-nav{
      position:absolute;top:50%;transform:translateY(-50%);
      border:0;width:50px;height:50px;border-radius:999px;
      background:rgba(255,255,255,.16);color:#fff;font-size:34px;
      line-height:50px;text-align:center;z-index:5;cursor:pointer;
    }
    .gal-lightbox-nav:hover{background:rgba(255,255,255,.28)}
    .gal-lightbox-nav.gal-prev{left:14px}
    .gal-lightbox-nav.gal-next{right:14px}

    /* ══════════════════════════════════════════════
       FAQs
    ══════════════════════════════════════════════ */
    .faq-wrap{max-width:860px;margin-inline:auto}
    .faq-item{
      border-bottom:1.5px solid var(--line);
      overflow:hidden;
    }
    .faq-item:first-child{border-top:1.5px solid var(--line)}
    .faq-btn{
      width:100%;
      display:flex;align-items:center;justify-content:space-between;
      gap:16px;
      padding:22px 0;
      background:none;border:none;cursor:pointer;
      font-family:'DM Sans',sans-serif;
      font-size:1.02rem;font-weight:600;
      color:var(--ink);
      text-align:left;
      transition:.2s ease;
    }
    .faq-btn:hover{color:var(--accent)}
    .faq-btn[aria-expanded="true"]{color:var(--accent)}
    .faq-icon{
      width:32px;height:32px;flex-shrink:0;
      border-radius:50%;
      background:var(--soft);
      display:grid;place-items:center;
      transition:var(--transition);
    }
    .faq-icon svg{width:14px;height:14px;transition:var(--transition)}
    .faq-btn[aria-expanded="true"] .faq-icon{background:rgba(196,35,41,.1)}
    .faq-btn[aria-expanded="true"] .faq-icon svg{transform:rotate(45deg);color:var(--accent)}
    .faq-body{
      display:none;
      padding:0 0 22px;
      color:var(--muted);
      font-size:.97rem;
      line-height:1.82;
    }
    .faq-body.open{display:block}

    /* ══════════════════════════════════════════════
       CONTACTO
    ══════════════════════════════════════════════ */
    .contact-grid{
      display:grid;
      grid-template-columns:400px 1fr;
      gap:clamp(28px,4vw,56px);
      align-items:start;
    }
    .contact-copy p{
      color:var(--muted);font-size:1.03rem;line-height:1.85;margin-bottom:28px;
    }
    .contact-items{display:grid;gap:12px}
    .contact-item{
      display:flex;align-items:flex-start;gap:14px;
      padding:18px;
      background:#fff;border:1.5px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow-xs);
      transition:var(--transition);
    }
    .contact-item:hover{border-color:rgba(196,35,41,.2);transform:translateX(3px)}
    .c-icon{
      width:46px;height:46px;flex-shrink:0;
      border-radius:13px;
      background:rgba(196,35,41,.08);
      display:grid;place-items:center;color:var(--accent);
    }
    .c-icon svg{width:22px;height:22px}
    .contact-item strong{
      display:block;font-size:.93rem;font-weight:700;
      letter-spacing:-.01em;margin-bottom:4px;color:var(--ink);
    }
    .contact-item span,.contact-item a{
      font-size:.91rem;color:var(--muted);line-height:1.7;word-break:break-word;
    }
    .contact-item a:hover{color:var(--accent)}

    /* Form */
    .form-shell{
      background:linear-gradient(160deg,#fff 0%,#fafafb 100%);
      border:1.5px solid var(--line);
      border-radius:var(--radius-xl);
      padding:clamp(28px,4vw,44px);
      box-shadow:var(--shadow-md);
    }
    .form-shell h3{
      font-family:'Outfit',sans-serif;
      font-size:1.45rem;font-weight:800;
      letter-spacing:-.04em;margin-bottom:8px;color:var(--ink);
    }
    .form-shell > p{
      color:var(--muted);font-size:.97rem;line-height:1.78;margin-bottom:28px;
    }
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
    .form-group:last-child{margin-bottom:0}
    .form-label{
      font-size:.83rem;font-weight:700;
      letter-spacing:.02em;text-transform:uppercase;
      color:var(--ink-2);
    }
    .form-control,.form-select{
      width:100%;
      min-height:52px;
      padding:12px 16px;
      border-radius:14px;
      border:1.5px solid #dde0e8;
      background:#fff;
      font-family:'DM Sans',sans-serif;
      font-size:.97rem;
      color:var(--ink);
      outline:none;
      transition:.2s ease;
      -webkit-appearance:none;appearance:none;
    }
    textarea.form-control{min-height:140px;resize:vertical}
    .form-control:focus,.form-select:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 3px rgba(196,35,41,.1);
    }
    .form-submit{
      width:100%;
      min-height:56px;
      border-radius:14px;
      font-size:1rem;font-weight:700;
      margin-top:4px;
    }

    /* ══════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════ */
    .footer{
      background:var(--ink);
      color:#fff;
      padding:clamp(56px,8vw,96px) 0 0;
      position:relative;overflow:hidden;
    }
    .footer::before{
      content:'';
      position:absolute;top:-120px;right:-160px;
      width:560px;height:560px;border-radius:50%;
      background:radial-gradient(circle,rgba(196,35,41,.1) 0%,transparent 70%);
      pointer-events:none;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.3fr 1fr 1fr;
      gap:clamp(32px,5vw,56px);
      padding-bottom:clamp(40px,6vw,72px);
      position:relative;z-index:1;
    }
    .footer-brand{
      display:flex;align-items:center;gap:11px;
      margin-bottom:18px;
    }
    .footer-brand img{height:36px;width:auto;object-fit:contain}
    .footer-brand span{
      font-family:'Outfit',sans-serif;
      font-size:.93rem;font-weight:700;
      color:#fff;line-height:1.2;
    }
    .footer-desc{
      color:rgba(255,255,255,.6);
      font-size:.93rem;line-height:1.85;
      max-width:380px;
      margin-bottom:24px;
    }
    .footer-social{display:flex;gap:10px}
    .footer-soc-btn{
      width:38px;height:38px;
      border-radius:10px;
      background:rgba(255,255,255,.08);
      display:grid;place-items:center;
      color:rgba(255,255,255,.7);
      transition:.2s ease;border:1.5px solid rgba(255,255,255,.1);
    }
    .footer-soc-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
    .footer-soc-btn svg{width:17px;height:17px}
    .footer-col-title{
      font-family:'Outfit',sans-serif;
      font-size:.88rem;font-weight:700;
      letter-spacing:.1em;text-transform:uppercase;
      color:rgba(255,255,255,.38);
      margin-bottom:18px;
    }
    .footer-links,.footer-contact-list{
      list-style:none;display:grid;gap:10px;
    }
    .footer-links a,.footer-contact-list a,.footer-contact-list li{
      font-size:.93rem;
      color:rgba(255,255,255,.64);
      transition:.2s ease;
    }
    .footer-links a:hover,.footer-contact-list a:hover{color:#fff}
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.1);
      padding:22px 0;
      display:flex;align-items:center;justify-content:space-between;
      gap:12px;flex-wrap:wrap;
      position:relative;z-index:1;
    }
    .footer-bottom span{font-size:.88rem;color:rgba(255,255,255,.44)}
    .footer-bottom a{color:rgba(255,255,255,.64)}
    .footer-bottom a:hover{color:#fff}

    /* ══════════════════════════════════════════════
       DIVIDER / ACCENT LINE
    ══════════════════════════════════════════════ */
    .section-divider{
      width:48px;height:3px;
      background:var(--accent);
      border-radius:2px;
      margin-bottom:28px;
    }

    /* ══════════════════════════════════════════════
       ANIMATE ON SCROLL (simple fade-up)
    ══════════════════════════════════════════════ */
    [data-aos]{
      opacity:0;
      transform:translateY(24px);
      transition:opacity .6s ease, transform .6s ease;
    }
    [data-aos].aos-in{
      opacity:1;transform:translateY(0);
    }
    [data-aos-delay="100"]{transition-delay:.1s}
    [data-aos-delay="150"]{transition-delay:.15s}
    [data-aos-delay="200"]{transition-delay:.2s}
    [data-aos-delay="250"]{transition-delay:.25s}
    [data-aos-delay="300"]{transition-delay:.3s}
    [data-aos-delay="350"]{transition-delay:.35s}
    [data-aos-delay="400"]{transition-delay:.4s}

    /* ══════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════ */
    @media(max-width:1100px){
      .hero-grid{grid-template-columns:1fr 420px}
      .hero-badge{left:-12px;bottom:-16px;min-width:190px}
    }
    @media(max-width:960px){
      .hero-grid,.about-wrap{grid-template-columns:1fr;gap:40px}
      .hero-visual{max-width:520px;margin-inline:auto}
      .hero-stats{grid-template-columns:repeat(2,1fr)}
      .hero-stat:nth-child(2){border-right:none}
      .hero-stat:nth-child(3){border-top:1.5px solid var(--line)}
      .hero-stat:nth-child(4){border-top:1.5px solid var(--line);border-right:none}
      .about-cards{grid-template-columns:1fr 1fr}
      .services-grid,.choose-grid{grid-template-columns:1fr 1fr}
      .contact-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:700px){
      .services-grid,.choose-grid,.footer-grid{grid-template-columns:1fr}
      .about-cards{grid-template-columns:1fr}
      .form-row{grid-template-columns:1fr}
      .navbar .container-xl{padding-inline:14px}
      .nav-inner{
        position:relative;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:0;
      }
      .nav-links,.nav-right .btn-main{display:none}
      .nav-mobile .nav-links{display:flex}
      .nav-right{
        position:absolute;
        right:0;
        top:50%;
        transform:translateY(-50%);
        display:flex;
        align-items:center;
        justify-content:flex-end;
        width:44px;
        margin:0;
      }
      .nav-toggle{display:flex;margin:0;width:44px;height:44px}
      .nav-brand{
        max-width:none;
        min-width:0;
        gap:10px;
        padding-right:58px;
      }
      .nav-brand img{height:32px}
      .nav-brand span{font-size:.84rem;line-height:1.08}
      .hero-copy{display:flex;flex-direction:column}
      .hero-label{order:1}
      .hero-h1{order:2}
      .hero-desc{order:3}
      .hero-visual--mobile{
        display:block;
        order:4;
        margin:2px 0 22px;
      }
      .hero-visual--mobile .hero-frame{
        aspect-ratio:auto;
        min-height:260px;
        max-height:420px;
        padding:22px;
      }
      .hero-visual--mobile .hero-frame img{
        width:100%;
        height:100%;
        object-fit:contain;
      }
      .hero-tags{order:6;margin-bottom:28px}
      .hero-actions{order:5;margin-bottom:22px}
      .hero-stats{order:7;grid-template-columns:1fr 1fr}
      .hero-grid > .hero-visual:not(.hero-visual--mobile){display:none}
      .hero-badge{display:none}
      .hero-chip{display:none}
    }
    @media(max-width:460px){
      .navbar .container-xl{padding-inline:12px}
      .nav-brand{padding-right:54px}
      .nav-brand span{font-size:.78rem;line-height:1.05}
      .hero-visual--mobile{margin:0 0 18px}
      .hero-visual--mobile .hero-frame{
        min-height:220px;
        padding:18px;
      }
      .hero-stats{grid-template-columns:1fr}
      .hero-stat{border-right:none;border-top:1.5px solid var(--line)}
      .hero-stat:first-child{border-top:none}
      .hero-actions{flex-direction:column}
      .hero-actions .btn-main,.hero-actions .btn-ghost{width:100%}
    }

/* ===== INLINE <style> BLOCK #2 ===== */
@media (max-width:700px){
      .navbar{
        overflow:visible;
      }
      .navbar .container-xl{
        position:relative !important;
        padding-inline:12px !important;
      }
      .nav-inner{
        position:relative !important;
        display:block !important;
        height:var(--nav-h) !important;
        min-height:var(--nav-h) !important;
      }
      .nav-brand{
        position:absolute !important;
        left:0 !important;
        top:50% !important;
        transform:translateY(-50%) !important;
        max-width:calc(100% - 74px) !important;
        min-width:0 !important;
        padding-right:0 !important;
        margin:0 !important;
      }
      .nav-brand img{
        height:31px !important;
      }
      .nav-brand span{
        font-size:.8rem !important;
        line-height:1.02 !important;
      }
      .nav-right{
        position:fixed !important;
        top:18px !important;
        right:10px !important;
        left:auto !important;
        transform:none !important;
        width:44px !important;
        height:44px !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        z-index:1005 !important;
      }
      .nav-toggle{
        display:flex !important;
        width:44px !important;
        height:44px !important;
        margin:0 !important;
      }
      .nav-mobile{
        top:var(--nav-h) !important;
        padding:14px 12px 18px !important;
        z-index:1001 !important;
      }
    }

    @media (max-width:460px){
      .navbar .container-xl{
        padding-inline:10px !important;
      }
      .nav-right{
        right:8px !important;
      }
      .nav-brand{
        max-width:calc(100% - 68px) !important;
      }
      .nav-brand span{
        font-size:.76rem !important;
      }
    }

/* ===== INLINE <style> BLOCK #3 ===== */
@media (max-width:700px){
      .navbar .container-xl{
        padding-inline:10px !important;
      }
      .nav-inner{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        align-items:center !important;
        gap:8px !important;
        width:100% !important;
        height:var(--nav-h) !important;
        min-height:var(--nav-h) !important;
      }
      .nav-links,
      .nav-right .btn-main{
        display:none !important;
      }
      .nav-mobile .nav-links{
        display:flex !important;
      }
      .nav-brand{
        position:static !important;
        transform:none !important;
        left:auto !important;
        top:auto !important;
        max-width:100% !important;
        min-width:0 !important;
        width:auto !important;
        margin:0 !important;
        padding-right:0 !important;
        display:flex !important;
        align-items:center !important;
        gap:10px !important;
        overflow:hidden !important;
      }
      .nav-brand img{
        height:32px !important;
        width:auto !important;
        flex-shrink:0 !important;
      }
      .nav-brand span{
        display:block !important;
        font-size:.8rem !important;
        line-height:1.04 !important;
        white-space:normal !important;
      }
      .nav-right{
        position:static !important;
        top:auto !important;
        right:auto !important;
        left:auto !important;
        transform:none !important;
        width:auto !important;
        height:auto !important;
        margin:0 !important;
        margin-left:auto !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        justify-self:end !important;
        flex-shrink:0 !important;
        z-index:auto !important;
      }
      .nav-toggle{
        display:flex !important;
        width:42px !important;
        height:42px !important;
        margin:0 !important;
        flex-shrink:0 !important;
      }
      .nav-mobile{
        top:var(--nav-h) !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        padding:16px 12px 20px !important;
        z-index:1001 !important;
      }
    }

    @media (max-width:460px){
      .navbar .container-xl{
        padding-inline:8px !important;
      }
      .nav-inner{
        grid-template-columns:minmax(0,1fr) 42px !important;
        gap:6px !important;
      }
      .nav-brand img{
        height:30px !important;
      }
      .nav-brand span{
        font-size:.74rem !important;
        line-height:1.02 !important;
      }
    }

/* ===== INLINE <style> BLOCK #4 ===== */
:root{
    --wa:#25D366;
    --wa-dark:#1fb85a;
    --light-bg:#ffffff;
    --light-bg-soft:#f6f8f7;
    --light-border:#dde4df;
    --dark-text:#1c1f1d;
    --muted-text:#6c756f;
  }

  .ig-float{
    position:fixed;
    right:18px;
    bottom:92px;
    z-index:9998;
    width:54px;
    height:54px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    text-decoration:none;
    background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    transition:transform .25s, box-shadow .25s, opacity .25s;
  }
  .ig-float:hover{
    transform:translateY(-2px) scale(1.04);
    box-shadow:0 14px 36px rgba(0,0,0,.35);
  }

  .wa-float{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9999;
    font-family:inherit;
  }

  .wa-btn{
    background:var(--wa);
    color:#fff;
    border:0;
    width:60px;
    height:60px;
    border-radius:50%;
    display:grid;
    place-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,.22);
    cursor:pointer;
    transition:transform .3s, box-shadow .3s, filter .3s;
    position:relative;
    overflow:hidden;
    z-index:9999;
  }
  .wa-btn:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 14px 36px rgba(0,0,0,.28);
    filter:brightness(.98);
  }

  .wa-card{
    position:absolute;
    right:0;
    bottom:74px;
    width:min(360px,92vw);
    background:var(--light-bg);
    color:var(--dark-text);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,.25);
    border:1px solid var(--light-border);
    transform:translateY(10px);
    opacity:0;
    transition:transform .3s, opacity .3s;
    z-index:10000;
  }
  .wa-card[aria-modal="true"]{
    transform:translateY(0);
    opacity:1;
  }

  .wa-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    background:linear-gradient(135deg,#ffffff,#ecf6f0);
    border-bottom:1px solid var(--light-border);
  }
  .wa-avatar{
    width:40px;
    height:40px;
    border-radius:10px;
    background:#e9f7ef;
    display:grid;
    place-items:center;
    border:1px solid #cfeeda;
    overflow:hidden;
  }
  .wa-title{
    font-weight:800;
    font-size:1.02rem;
    color:var(--dark-text);
  }
  .wa-status{
    font-size:.85rem;
    color:var(--muted-text);
    display:flex;
    align-items:center;
    gap:6px;
  }
  .wa-status::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--wa);
  }
  .wa-close{
    margin-left:auto;
    background:transparent;
    color:var(--muted-text);
    border:0;
    font-size:24px;
    cursor:pointer;
    opacity:.75;
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
  }
  .wa-close:hover{
    opacity:1;
    background:rgba(0,0,0,.04);
  }

  .wa-body{
    padding:12px 14px;
    max-height:40vh;
    overflow:auto;
    background:var(--light-bg-soft);
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .wa-bubble{
    max-width:88%;
    padding:9px 11px;
    border-radius:14px;
    line-height:1.35;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
    animation:fadeIn .25s ease;
    font-size:.9rem;
  }
  @keyframes fadeIn{
    from{opacity:0;transform:translateY(5px)}
    to{opacity:1;transform:none}
  }
  .wa-bot{
    background:#fff;
    border:1px solid var(--light-border);
    align-self:flex-start;
    border-bottom-left-radius:4px;
  }
  .wa-user{
    background:var(--wa);
    color:#fff;
    align-self:flex-end;
    border-bottom-right-radius:4px;
  }

  .wa-compose{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    padding:10px 12px;
    background:#fff;
    border-top:1px solid var(--light-border);
  }
  .wa-compose textarea{
    resize:none;
    border-radius:12px;
    padding:10px 12px;
    border:1px solid var(--light-border);
    background:#f9fbfa;
    color:var(--dark-text);
    outline:none;
    min-height:44px;
    font-family:inherit;
    font-size:.9rem;
    transition:.2s;
  }
  .wa-compose textarea:focus{
    border-color:var(--wa);
    box-shadow:0 0 0 2px rgba(37,211,102,.15);
    background:#fff;
  }
  .wa-send{
    background:var(--wa);
    color:#fff;
    border:0;
    border-radius:12px;
    padding:0 16px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
  }
  .wa-send:hover{
    background:var(--wa-dark);
    transform:scale(1.04);
  }

  .wa-body::-webkit-scrollbar{width:6px}
  .wa-body::-webkit-scrollbar-track{background:rgba(0,0,0,.03);border-radius:3px}
  .wa-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:3px}
  .wa-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.18)}

  @media (max-width:480px){
    .ig-float{
      right:12px;
      bottom:86px;
      width:52px;
      height:52px;
    }
    .wa-float{
      right:12px;
      bottom:12px;
    }
    .wa-card{
      width:calc(100vw - 24px);
      right:0;
    }
  }