/* MIXED CSS PACK */
/* Template: tanimotos.com.ar/index.html */
/* Template mtime: 2026-04-07 13:20:04 */

/* external link (no embedded): https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;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 ===== */
/* ============================================
       VARIABLES Y CONFIGURACIÓN BASE
    ============================================ */
    :root {
      --accent: #fcc70f;
      --accent-strong: #e5b000;
      --accent-light: rgba(252, 199, 15, 0.12);
      --accent-glow: rgba(252, 199, 15, 0.4);
      --bg: #ffffff;
      --bg-warm: #fffdf8;
      --surface: #ffffff;
      --text: #111111;
      --text-secondary: #1a1a1a;
      --muted: #5f5f5f;
      --line: #e9e9e9;
      --line-soft: rgba(0,0,0,0.04);
      
      /* Sombras refinadas */
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
      --shadow-md: 0 8px 30px rgba(0,0,0,0.06);
      --shadow-lg: 0 20px 50px rgba(0,0,0,0.08);
      --shadow-xl: 0 30px 70px rgba(0,0,0,0.1);
      --shadow-accent: 0 15px 40px rgba(252, 199, 15, 0.25);
      --shadow-accent-lg: 0 20px 50px rgba(252, 199, 15, 0.35);
      
      /* Radios */
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 28px;
      --radius-xl: 36px;
      
      /* Navbar */
      --nav-h: 88px;
      
      /* Transiciones */
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* ============================================
       RESET Y BASE
    ============================================ */
    *, *::before, *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: clip;
    }

    body {
      margin: 0;
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x: clip;
      width: 100%;
      max-width: 100%;
      line-height: 1.6;
    }

    a {
      text-decoration: none;
      color: inherit;
      transition: color 0.3s var(--ease-out);
    }

    img {
      max-width: 100%;
      display: block;
    }

    /* ============================================
       CONTENEDOR PERSONALIZADO
    ============================================ */
    .container-custom {
      width: min(1220px, calc(100% - 40px));
      margin-inline: auto;
    }

    /* ============================================
       SECCIONES
    ============================================ */
    .section {
      padding: 120px 0;
      position: relative;
    }

    .section--alt {
      background: var(--bg-warm);
    }

    /* ============================================
       EYEBROW / BADGE
    ============================================ */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 100px;
      background: linear-gradient(135deg, rgba(252,199,15,0.15) 0%, rgba(252,199,15,0.08) 100%);
      border: 1px solid rgba(252,199,15,0.3);
      color: #7a5f00;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      position: relative;
      overflow: hidden;
    }

    .eyebrow::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
      animation: shimmer 3s infinite;
    }

    @keyframes shimmer {
      0% { left: -100%; }
      100% { left: 100%; }
    }

    /* ============================================
       ENCABEZADOS DE SECCIÓN
    ============================================ */
    .section-head {
      max-width: 800px;
      margin: 0 auto 70px;
      text-align: center;
    }

    .section-title {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(2.2rem, 4.5vw, 3.4rem);
      line-height: 1.1;
      font-weight: 800;
      margin: 20px 0 18px;
      letter-spacing: -0.035em;
      color: var(--text);
    }

    .section-subtitle {
      font-size: 1.15rem;
      color: var(--muted);
      margin: 0;
      max-width: 600px;
      margin-inline: auto;
      line-height: 1.7;
    }

    .text-gradient {
      background: linear-gradient(135deg, #b8860b 0%, #fcc70f 50%, #d4a900 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ============================================
       NAVBAR
    ============================================ */
    .navbar-custom {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      min-height: var(--nav-h);
      width: 100%;
      max-width: 100%;
      transition: all 0.4s var(--ease-out);
    }

    .navbar-custom.scrolled {
      background: rgba(255, 255, 255, 0.95);
      box-shadow: var(--shadow-md);
    }

    .navbar .container-custom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      min-width: 0;
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
      font-family: 'Outfit', sans-serif;
      font-size: 1.1rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
      transition: transform 0.3s var(--ease-out);
    }

    .navbar-brand:hover {
      transform: scale(1.02);
    }

    .navbar-brand img {
      height: 44px;
      width: auto;
      flex: 0 0 auto;
    }

    .navbar-toggler {
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      box-shadow: none !important;
      transition: all 0.3s var(--ease-out);
    }

    .navbar-toggler:hover {
      background: var(--accent-light);
      border-color: var(--accent);
    }

    .nav-link {
      font-weight: 600;
      color: var(--text);
      padding: 12px 16px !important;
      position: relative;
      transition: color 0.3s var(--ease-out);
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 6px;
      left: 16px;
      right: 16px;
      height: 2px;
      background: var(--accent);
      border-radius: 2px;
      transform: scaleX(0);
      transition: transform 0.3s var(--ease-out);
    }

    .nav-link:hover,
    .nav-link:focus {
      color: var(--accent-strong);
    }

    .nav-link:hover::after {
      transform: scaleX(1);
    }


    .navbar-collapse {
      min-width: 0;
    }

    .navbar-nav {
      min-width: 0;
    }

    /* ============================================
       BOTONES
    ============================================ */
    .btn-main,
    .btn-outline-main {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 56px;
      padding: 16px 28px;
      border-radius: 100px;
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: -0.01em;
      transition: all 0.4s var(--ease-out);
      border: 2px solid transparent;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .btn-main {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
      color: #111;
      box-shadow: var(--shadow-accent);
    }

    .btn-main::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: left 0.5s var(--ease-out);
    }

    .btn-main:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-accent-lg);
      color: #111;
    }

    .btn-main:hover::before {
      left: 100%;
    }

    .btn-outline-main {
      border-color: rgba(0, 0, 0, 0.12);
      color: var(--text);
      background: #fff;
      box-shadow: var(--shadow-sm);
    }

    .btn-outline-main:hover {
      border-color: var(--accent);
      background: var(--accent-light);
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
      color: var(--text);
    }

    /* ============================================
       HERO
    ============================================ */
    .hero {
      padding-top: calc(var(--nav-h) + 50px);
      padding-bottom: 100px;
      overflow: hidden;
      background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
      position: relative;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 80%;
      height: 150%;
      background: radial-gradient(circle, rgba(252,199,15,0.08) 0%, transparent 60%);
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      align-items: center;
      gap: 60px;
    }

    .hero-copy {
      max-width: 680px;
      position: relative;
      z-index: 2;
    }

    .hero-title {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(2.8rem, 5.5vw, 5rem);
      line-height: 1;
      font-weight: 900;
      letter-spacing: -0.055em;
      margin: 24px 0 22px;
      color: var(--text);
    }

    .hero-lead {
      font-size: 1.25rem;
      color: var(--text-secondary);
      margin: 0 0 16px;
      font-weight: 500;
      line-height: 1.6;
    }

    .hero-text {
      font-size: 1.05rem;
      color: var(--muted);
      max-width: 560px;
      margin: 0;
      line-height: 1.75;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 36px;
    }

    .hero-points {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px;
    }

    .hero-points span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 18px;
      border-radius: 100px;
      background: #fff;
      border: 1px solid var(--line);
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--text-secondary);
      box-shadow: var(--shadow-sm);
      transition: all 0.3s var(--ease-out);
    }

    .hero-points span:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--accent);
    }

    .hero-points span::before {
      content: '✓';
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--accent);
      color: #111;
      font-size: 0.7rem;
      font-weight: 800;
    }

    /* Hero Media */
    .hero-media-wrap {
      position: relative;
      min-height: 560px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-glow {
      position: absolute;
      width: 90%;
      height: 90%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(252,199,15,0.35) 0%, rgba(252,199,15,0.15) 35%, transparent 70%);
      filter: blur(40px);
      pointer-events: none;
      animation: pulse-glow 4s ease-in-out infinite;
    }

    @keyframes pulse-glow {
      0%, 100% { opacity: 0.8; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.05); }
    }

    .hero-card {
      position: relative;
      width: min(100%, 520px);
      aspect-ratio: 1/1;
      background: linear-gradient(145deg, #ffffff 0%, #fafafa 100%);
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-xl);
      padding: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: transform 0.5s var(--ease-out);
    }

    .hero-card:hover {
      transform: scale(1.02) rotate(1deg);
    }

    .hero-card::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(135deg, var(--accent) 0%, transparent 50%, var(--accent) 100%);
      border-radius: calc(var(--radius-xl) + 2px);
      z-index: -1;
      opacity: 0;
      transition: opacity 0.4s var(--ease-out);
    }

    .hero-card:hover::before {
      opacity: 1;
    }

    .hero-card img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }

    /* ============================================
       CARDS BASE
    ============================================ */
    .about-box,
    .contact-card,
    .faq-wrap,
    .service-card,
    .reason-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      transition: all 0.4s var(--ease-out);
    }

    /* ============================================
       ABOUT BOX
    ============================================ */
    .about-box {
      padding: 50px;
      position: relative;
      overflow: hidden;
    }

    .about-box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 6px;
      height: 100%;
      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
      border-radius: 0 4px 4px 0;
    }

    .about-box p {
      font-size: 1.1rem;
      line-height: 1.85;
      color: var(--muted);
    }

    .about-box p:first-of-type {
      color: var(--text-secondary);
      font-weight: 500;
    }

    .about-box p:last-child {
      margin-bottom: 0;
    }

    /* ============================================
       SERVICE & REASON CARDS
    ============================================ */
    .service-card,
    .reason-card {
      height: 100%;
      padding: 36px;
      position: relative;
      overflow: hidden;
    }

    .service-card::before,
    .reason-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s var(--ease-out);
    }

    .service-card:hover,
    .reason-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
      border-color: rgba(252, 199, 15, 0.3);
    }

    .service-card:hover::before,
    .reason-card:hover::before {
      transform: scaleX(1);
    }

    /* Icon Chip */
    .icon-chip {
      width: 64px;
      height: 64px;
      border-radius: var(--radius-md);
      background: linear-gradient(145deg, #ffe680 0%, var(--accent) 100%);
      color: #111;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
      box-shadow: var(--shadow-accent);
      transition: all 0.4s var(--ease-bounce);
    }

    .service-card:hover .icon-chip,
    .reason-card:hover .icon-chip {
      transform: scale(1.1) rotate(-5deg);
    }

    .icon-chip svg {
      width: 28px;
      height: 28px;
    }

    .card-title {
      font-family: 'Outfit', sans-serif;
      font-size: 1.35rem;
      line-height: 1.2;
      font-weight: 800;
      margin: 0 0 14px;
      letter-spacing: -0.02em;
      color: var(--text);
    }

    .card-text {
      color: var(--muted);
      margin: 0;
      font-size: 0.98rem;
      line-height: 1.7;
    }

    .reasons-grid .reason-card {
      text-align: left;
    }

    /* ============================================
       GALERÍA (SIN CAMBIOS COMO SOLICITADO)
    ============================================ */
    .gal-gallery .carousel{max-width:980px;margin-inline:auto;position:relative}
    .gal-frame{
      height:clamp(260px,48vh,500px);
      background:#fff;
      border:1px solid var(--line);
      border-radius:24px;
      overflow:hidden;
      box-shadow:var(--shadow-lg);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:12px
    }
    .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
    }
    .gal-gallery .carousel-control-prev,
    .gal-gallery .carousel-control-next{
      z-index:20;width:52px;height:52px;top:50%;transform:translateY(-50%);opacity:1;background:rgba(17,17,17,.72);border-radius:50%;margin:0 10px
    }
    .gal-gallery .carousel-control-prev{left:0}
    .gal-gallery .carousel-control-next{right:0}
    .gal-gallery .gal-ctrl-icon{width:2.6rem;height:2.6rem;background-size:60% 60%}
    .gal-gallery .carousel-indicators{z-index:10;bottom:-56px}
    .gal-gallery .carousel-indicators button{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.35);border:none}
    .gal-gallery .carousel-indicators button.active{background:#000}
    .gal-gallery{padding-bottom:64px}
    #galLightbox .modal-content{background:#000;border-radius:22px;overflow:hidden}
    #galLightboxImg{max-height:86vh;width:100%;height:auto;object-fit:contain;background:#000}
    .gal-lightbox-nav{
      position:absolute;top:50%;transform:translateY(-50%);border:0;width:46px;height:46px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;font-size:30px;line-height:46px;text-align:center;z-index:5;cursor:pointer
    }
    .gal-lightbox-nav:hover{background:rgba(255,255,255,.3)}
    .gal-lightbox-nav.gal-prev{left:12px}
    .gal-lightbox-nav.gal-next{right:12px}

    /* ============================================
       FAQ ACCORDION
    ============================================ */
    .faq-wrap {
      padding: 8px;
      overflow: hidden;
    }

    .accordion-item {
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0 !important;
      background: transparent;
    }

    .accordion-item:last-child {
      border-bottom: 0;
    }

    .accordion-button {
      background: transparent;
      color: var(--text);
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 1.1rem;
      padding: 26px 24px;
      box-shadow: none !important;
      transition: all 0.3s var(--ease-out);
    }

    .accordion-button:not(.collapsed) {
      background: var(--accent-light);
      color: #7a5f00;
    }

    .accordion-button::after {
      width: 20px;
      height: 20px;
      background-size: 20px;
      transition: transform 0.4s var(--ease-out);
    }

    .accordion-button:hover {
      background: var(--accent-light);
    }

    .accordion-body {
      color: var(--muted);
      padding: 0 24px 26px;
      font-size: 1.02rem;
      line-height: 1.75;
    }

    /* ============================================
       CONTACTO
    ============================================ */
    .contact-card {
      padding: 44px;
      height: 100%;
    }

    .contact-list {
      display: grid;
      gap: 16px;
      margin-top: 28px;
    }

    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 18px;
      padding: 22px 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, #fffdf8 0%, #fff 100%);
      transition: all 0.3s var(--ease-out);
    }

    .contact-item:hover {
      transform: translateX(6px);
      border-color: var(--accent);
      box-shadow: var(--shadow-md);
    }

    .contact-item .icon-chip {
      width: 52px;
      height: 52px;
      border-radius: var(--radius-sm);
      margin-bottom: 0;
      flex-shrink: 0;
    }

    .contact-item .icon-chip svg {
      width: 22px;
      height: 22px;
    }

    .contact-item strong {
      display: block;
      margin-bottom: 4px;
      font-family: 'Outfit', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
    }

    .contact-item p,
    .contact-item a {
      margin: 0;
      color: var(--muted);
      word-break: break-word;
      font-size: 0.95rem;
      transition: color 0.3s var(--ease-out);
    }

    .contact-item a:hover {
      color: var(--accent-strong);
    }

    /* Form Controls */
    .form-label {
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--text);
      margin-bottom: 8px;
    }

    .form-control,
    .form-select {
      min-height: 58px;
      border-radius: var(--radius-sm);
      border: 2px solid var(--line);
      padding: 16px 20px;
      font-size: 1rem;
      background: #fff;
      box-shadow: none !important;
      transition: all 0.3s var(--ease-out);
    }

    .form-control:focus,
    .form-select:focus {
      border-color: var(--accent);
      background: #fffdf8;
    }

    textarea.form-control {
      min-height: 160px;
      resize: vertical;
    }

    /* ============================================
       FOOTER
    ============================================ */
    .site-footer {
      background: linear-gradient(145deg, var(--accent) 0%, #f5c000 100%);
      color: #111;
      padding: 50px 0 24px;
      position: relative;
      overflow: hidden;
    }

    .site-footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #b38900 0%, var(--accent) 50%, #b38900 100%);
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1.3fr 0.8fr 0.9fr;
      gap: 40px;
      align-items: start;
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
    }

    .footer-logo {
      height: 48px;
      width: auto;
      flex: 0 0 auto;
    }

    .footer-brand span {
      font-family: 'Outfit', sans-serif;
      font-size: 1.1rem;
      font-weight: 800;
    }

    .footer-text,
    .footer-links a,
    .footer-contact a,
    .footer-contact p {
      color: rgba(17, 17, 17, 0.85);
    }

    .footer-text {
      font-size: 0.95rem;
      line-height: 1.7;
    }

    .footer-head {
      font-family: 'Outfit', sans-serif;
      font-size: 1.05rem;
      font-weight: 800;
      margin-bottom: 18px;
      color: #111;
    }

    .footer-links,
    .footer-contact {
      display: grid;
      gap: 12px;
    }

    .footer-links a,
    .footer-contact a {
      font-size: 0.95rem;
      transition: all 0.3s var(--ease-out);
    }

    .footer-links a:hover,
    .footer-contact a:hover {
      color: #000;
      transform: translateX(4px);
    }

    .footer-bottom {
      margin-top: 36px;
      padding-top: 24px;
      border-top: 1px solid rgba(0, 0, 0, 0.12);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      font-size: 0.9rem;
    }

    .footer-bottom a {
      font-weight: 700;
      color: #111;
      transition: opacity 0.3s var(--ease-out);
    }

    .footer-bottom a:hover {
      opacity: 0.7;
    }

    /* ============================================
       ANIMACIONES DE ENTRADA
    ============================================ */
    .fade-up {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    }

    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .stagger-1 { transition-delay: 0.1s; }
    .stagger-2 { transition-delay: 0.2s; }
    .stagger-3 { transition-delay: 0.3s; }
    .stagger-4 { transition-delay: 0.4s; }

    /* ============================================
       RESPONSIVE
    ============================================ */
    @media (max-width: 991.98px) {
      :root {
        --nav-h: 80px;
      }

      .navbar .container-custom {
        gap: 12px;
      }

      .section {
        padding: 90px 0;
      }

      .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .hero-copy {
        max-width: none;
        text-align: center;
      }

      .hero-text {
        margin-inline: auto;
      }

      .hero-actions {
        justify-content: center;
      }

      .hero-points {
        justify-content: center;
      }

      .hero-media-wrap {
        min-height: auto;
      }

      .hero-card {
        max-width: 450px;
        margin-inline: auto;
      }

      .footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: var(--radius-md);
        padding: 16px;
        margin-top: 12px;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
      }

      .navbar-nav {
        padding: 8px 0;
        width: 100%;
        gap: 2px !important;
        align-items: stretch !important;
      }

      .nav-link {
        display: block;
        width: 100%;
        padding: 14px 8px !important;
      }

      .nav-link::after {
        display: none;
      }

      .navbar-nav .nav-item,
      .navbar-nav .btn-main {
        width: 100%;
      }

      .navbar-nav .btn-main {
        min-height: 52px;
      }

      .about-box {
        padding: 36px;
      }
    }

    @media (max-width: 575.98px) {
      .container-custom {
        width: calc(100% - 24px);
      }

      .section {
        padding: 70px 0;
      }

      .section-head {
        margin-bottom: 50px;
      }

      .hero {
        padding-top: calc(var(--nav-h) + 30px);
        padding-bottom: 70px;
      }

      .hero-title {
        font-size: clamp(2.2rem, 10vw, 3rem);
      }

      .hero-lead {
        font-size: 1.1rem;
      }

      .hero-actions {
        flex-direction: column;
      }

      .btn-main,
      .btn-outline-main {
        width: 100%;
      }

      .hero-points {
        gap: 10px;
      }

      .hero-points span {
        width: 100%;
        justify-content: center;
        text-align: center;
      }

      .navbar-brand {
        max-width: calc(100% - 64px);
      }

      .navbar-brand img {
        height: 38px;
      }

      .navbar-brand span {
        font-size: 0.9rem;
        line-height: 1.1;
        white-space: normal;
      }

      .navbar-toggler {
        margin-left: auto;
        padding: 9px 12px;
      }

      .contact-card,
      .about-box,
      .service-card,
      .reason-card {
        padding: 28px;
      }

      .gal-frame {
        height: clamp(220px, 40vh, 360px);
      }

      .footer-bottom {
        font-size: 0.85rem;
        text-align: center;
        justify-content: center;
      }
    }

/* ===== INLINE <style> BLOCK #2 ===== */
.flashes-loop-section{
          background: linear-gradient(180deg, #ffffff 0%, #f8f5ef 100%);
          overflow: hidden;
          position: relative;
        }
    
        .flashes-loop-wrap{
          max-width: 1120px;
          margin: 0 auto;
        }
    
        .flashes-stage{
          position: relative;
          min-height: 470px;
          display: flex;
          align-items: center;
          justify-content: center;
          isolation: isolate;
        }
    
        .flashes-stage::before{
          content: "";
          position: absolute;
          left: 50%;
          bottom: 10px;
          transform: translateX(-50%);
          width: min(760px, 82%);
          height: 120px;
          background: radial-gradient(circle, rgba(10,43,74,.10) 0%, rgba(10,43,74,.04) 42%, transparent 72%);
          filter: blur(22px);
          z-index: 0;
          pointer-events: none;
        }
    
        .flash-loop-card{
          position: absolute;
          width: clamp(250px, 28vw, 355px);
          aspect-ratio: 4 / 5;
          border-radius: 30px;
          background:
            radial-gradient(circle at top right, rgba(200,169,110,.16), transparent 35%),
            linear-gradient(135deg, #fcfcfc 0%, #f5f7fa 100%);
          border: 1px solid rgba(10,43,74,.06);
          box-shadow: 0 18px 40px rgba(7,29,53,.10);
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 18px;
          will-change: transform, opacity, filter;
          transition:
            transform 1s cubic-bezier(.22,.8,.2,1),
            opacity 1s ease,
            filter 1s ease,
            box-shadow 1s ease;
          backface-visibility: hidden;
        }
    
        .flash-loop-card::before{
          content:"";
          position:absolute;
          inset:0;
          background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 32%);
          pointer-events:none;
          z-index:1;
        }
    
        .flash-loop-card::after{
          content:"";
          position:absolute;
          inset:-10%;
          background: linear-gradient(115deg, transparent 24%, rgba(255,255,255,.70) 50%, transparent 76%);
          transform: translateX(-140%);
          opacity: 0;
          pointer-events:none;
          z-index:2;
        }
    
        .flash-loop-card img{
          position: relative;
          z-index: 0;
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center;
          display: block;
          filter: drop-shadow(0 16px 24px rgba(10,43,74,.14));
          pointer-events: none;
          user-select: none;
          transition: transform 1s cubic-bezier(.22,.8,.2,1), filter 1s ease;
        }
    
        .flash-pos-center{
          transform: translateX(0) scale(1) rotate(0deg);
          opacity: 1;
          z-index: 5;
          filter: blur(0) saturate(1.08) brightness(1.02);
          box-shadow: 0 28px 64px rgba(7,29,53,.20);
          animation: flashCenterBoom .92s cubic-bezier(.2,.88,.24,1);
        }
    
        .flash-pos-center::after{
          animation: flashFrontSweep .9s ease;
        }
    
        .flash-pos-center img{
          transform: scale(1.03);
          filter: drop-shadow(0 20px 30px rgba(10,43,74,.18));
        }
    
        .flash-pos-right{
          transform: translateX(265px) scale(.88) rotate(4deg);
          opacity: .62;
          z-index: 3;
          filter: blur(5px) saturate(.72) brightness(.92);
          box-shadow: 0 12px 22px rgba(7,29,53,.07);
        }
    
        .flash-pos-right img{
          transform: scale(.96);
          filter: drop-shadow(0 10px 16px rgba(10,43,74,.10));
        }
    
        .flash-pos-left{
          transform: translateX(-265px) scale(.88) rotate(-4deg);
          opacity: .62;
          z-index: 2;
          filter: blur(5px) saturate(.72) brightness(.92);
          box-shadow: 0 12px 22px rgba(7,29,53,.07);
        }
    
        .flash-pos-left img{
          transform: scale(.96);
          filter: drop-shadow(0 10px 16px rgba(10,43,74,.10));
        }
    
        .flash-pos-hidden{
          transform: translateX(430px) scale(.74) rotate(8deg);
          opacity: 0;
          z-index: 1;
          filter: blur(14px) saturate(.55) brightness(.86);
          pointer-events: none;
          box-shadow: none;
        }
    
        .flash-pos-hidden-left{
          transform: translateX(-430px) scale(.74) rotate(-8deg);
          opacity: 0;
          z-index: 1;
          filter: blur(14px) saturate(.55) brightness(.86);
          pointer-events: none;
          box-shadow: none;
        }
    
        @keyframes flashCenterBoom{
          0%{
            transform: translateX(110px) scale(.68) rotate(10deg);
            opacity: 0;
            filter: blur(14px) brightness(1.08);
          }
          38%{
            transform: translateX(-18px) scale(1.10) rotate(-2.6deg);
            opacity: 1;
            filter: blur(0) brightness(1.06);
          }
          60%{
            transform: translateX(8px) scale(.985) rotate(.8deg);
          }
          78%{
            transform: translateX(-4px) scale(1.02) rotate(-.35deg);
          }
          100%{
            transform: translateX(0) scale(1) rotate(0deg);
            opacity: 1;
            filter: blur(0) brightness(1);
          }
        }
    
        @keyframes flashFrontSweep{
          0%{
            transform: translateX(-140%);
            opacity: 0;
          }
          18%{
            opacity: .9;
          }
          100%{
            transform: translateX(140%);
            opacity: 0;
          }
        }
    
        @media (max-width: 991px){
          .flashes-stage{
            min-height: 390px;
          }
    
          .flash-loop-card{
            width: min(40vw, 295px);
            border-radius: 26px;
          }
    
          .flash-pos-right{
            transform: translateX(170px) scale(.86) rotate(4deg);
            filter: blur(5px) saturate(.7) brightness(.92);
          }
    
          .flash-pos-left{
            transform: translateX(-170px) scale(.86) rotate(-4deg);
            filter: blur(5px) saturate(.7) brightness(.92);
          }
    
          .flash-pos-hidden{
            transform: translateX(300px) scale(.72) rotate(8deg);
          }
    
          .flash-pos-hidden-left{
            transform: translateX(-300px) scale(.72) rotate(-8deg);
          }
        }
    
        @media (max-width: 640px){
          .flashes-loop-wrap .text-center{
            margin-bottom: 2rem !important;
          }
    
          .flashes-stage{
            min-height: 315px;
          }
    
          .flash-loop-card{
            width: min(72vw, 276px);
            padding: 14px;
            border-radius: 22px;
          }
    
          .flash-pos-center{
            transform: translateX(0) scale(1);
          }
    
          .flash-pos-right{
            transform: translateX(68px) scale(.82) rotate(4deg);
            opacity: .38;
            filter: blur(7px) saturate(.66) brightness(.9);
          }
    
          .flash-pos-left{
            transform: translateX(-68px) scale(.82) rotate(-4deg);
            opacity: .38;
            filter: blur(7px) saturate(.66) brightness(.9);
          }
    
          .flash-pos-hidden,
          .flash-pos-hidden-left{
            opacity: 0;
          }
    
          @keyframes flashCenterBoom{
            0%{
              transform: translateX(75px) scale(.7) rotate(9deg);
              opacity: 0;
              filter: blur(12px) brightness(1.06);
            }
            42%{
              transform: translateX(-8px) scale(1.08) rotate(-1.6deg);
              opacity: 1;
              filter: blur(0);
            }
            100%{
              transform: translateX(0) scale(1) rotate(0deg);
              opacity: 1;
              filter: blur(0);
            }
          }
        }

/* ===== INLINE <style> BLOCK #3 ===== */
.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:2147483647;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-family:inherit;
}

.wa-btn{
  width:60px;
  height:60px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .25s, box-shadow .25s;
}
.wa-btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 36px rgba(37,211,102,.55);
}

.wa-card{
  position:absolute;
  right:0;
  bottom:74px;
  width:min(360px,92vw);
  background:#fff;
  border-radius:18px;
  border:1px solid #e3e6ea;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  overflow:hidden;
  transform:translateY(10px);
  opacity:0;
  transition:.25s ease;
}
.wa-card[aria-modal="true"]{
  transform:none;
  opacity:1;
}

.wa-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  background:linear-gradient(135deg,#fcc70f,#d5a600);
  color:#111;
}
.wa-avatar{
  width:40px;
  height:40px;
  background:#fff;
  border-radius:10px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.wa-avatar img{
  width:26px;
  height:26px;
  object-fit:contain;
}
.wa-title{
  font-weight:800;
}
.wa-status{
  font-size:.85rem;
  opacity:.85;
}

.wa-close{
  margin-left:auto;
  border:none;
  background:transparent;
  color:#111;
  font-size:24px;
  cursor:pointer;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}
.wa-close:hover{
  opacity:1;
  background:rgba(255,255,255,.35);
}

.wa-body{
  padding:14px;
  max-height:40vh;
  overflow:auto;
  background:#f8f9fa;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.wa-bubble{
  max-width:88%;
  padding:10px 12px;
  border-radius:14px;
  font-size:.95rem;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.wa-bot{
  background:#fff;
  border:1px solid #e3e6ea;
  align-self:flex-start;
}
.wa-user{
  background:#fff7d1;
  border:1px solid #f0dc7a;
  align-self:flex-end;
}

.wa-compose{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:10px;
  border-top:1px solid #e3e6ea;
  background:#fff;
}
.wa-compose textarea{
  resize:none;
  border-radius:12px;
  padding:10px;
  border:1px solid #e3e6ea;
  font-family:inherit;
  outline:none;
}
.wa-compose textarea:focus{
  border-color:#fcc70f;
  box-shadow:0 0 0 3px rgba(252,199,15,.18);
}
.wa-send{
  background:#fcc70f;
  color:#111;
  border:none;
  border-radius:12px;
  padding:0 16px;
  cursor:pointer;
}
.wa-send:hover{
  background:#e5b400;
}

@media(max-width:480px){
  .wa-float{
    right:12px;
    bottom:12px;
  }
  .wa-card{
    width:calc(100vw - 24px);
  }
}

