/* MIXED CSS PACK */
/* Template: construccionesfrank.com.ar/index.html */
/* Template mtime: 2025-10-31 14:04:23 */

/* external link (no embedded): https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap */

/* ===== INLINE <style> BLOCK #1 ===== */
/* === HOTFIX: centrar todo y eliminar cualquier overflow residual sin mover tu layout === */
    html, body { width:100%; overflow-x:hidden; }
    .container { margin-inline:auto; max-width:1140px; }
    .hero-box { margin-inline:auto; }
    /* botones del ticker INSIDE el frame para que no empujen el viewport */
    .gallery-prev{ left:12px; }
    .gallery-next{ right:12px; }
    /* tarjetas de la galería se ajustan un poco más en móviles angostos */
    .gallery-item{ max-width:86vw; }
    /* elementos fijos sin desbordar */
    #fc-fabs, #fc-waCard, footer, .navbar { overflow-x:hidden; }
    /* asegurar que filas no generen margen negativo fuera del container */
    main .row { margin-left: calc(var(--bs-gutter-x) * -0.5); margin-right: calc(var(--bs-gutter-x) * -0.5); }
    @media (max-width: 576px){
      main .row { margin-left: 0; margin-right: 0; }
    }

    /* ====== Base palette (naranja) ====== */
    :root {
      --primary: #ff601a;
      --primary-dark: #e05515;
      --primary-light: #ff7a3d;
      --secondary: #f59e0b;
      --dark: #0f172a;
      --darker: #0a0f1c;
      --light: #f8fafc;
      --muted: #64748b;
      --card: #ffffff;
      --soft: #fef6f2;
      --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      --gradient-dark: linear-gradient(135deg, var(--dark) 0%, var(--darker) 100%);
      --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
      --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
      --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
      --radius: 12px;
      --radius-lg: 16px;
      --transition: all 0.3s ease;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; scroll-behavior: smooth; }
    body {
      display: flex; flex-direction: column; min-height: 100vh;
      font-family: 'Inter', sans-serif; color: var(--dark); background-color: var(--light);
      overflow-x: hidden; /* evita scroll horizontal */
    }
    main { flex: 1 0 auto; }

    /* ====== Navbar (fix: toggler visible + sin overflow) ====== */
    .navbar.navbar-light { /* usar .navbar-light para que el ícono hamburguesa se vea */
      background-color: rgba(255,255,255,0.95);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow-sm);
      padding: 1rem 0;
      transition: var(--transition);
    }
    .navbar-brand {
      font-weight: 800; font-size: 1.5rem;
      background: var(--gradient-primary);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .navbar .nav-link { font-weight: 500; position: relative; padding: .5rem 1rem; transition: var(--transition); }
    .navbar .nav-link:after {
      content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
      background: var(--gradient-primary); transition: var(--transition); transform: translateX(-50%);
    }
    .navbar .nav-link:hover:after, .navbar .nav-link.active:after { width: 80%; }
    .navbar-toggler { border: 0; }
    .navbar-toggler:focus { box-shadow: 0 0 0 .15rem rgba(255,96,26,.35); }
    .btn-cta { white-space: nowrap; background: var(--gradient-primary); border: none; font-weight: 600;
      padding: .6rem 1.2rem; border-radius: var(--radius); transition: var(--transition); box-shadow: var(--shadow); }
    .btn-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

    /* ====== Hero blanco delimitado, logo a la derecha ====== */
    #inicio { position: relative; min-height: 100vh; display:flex; align-items:center; padding-top:5rem; padding-bottom:3rem; overflow: clip; }
    .hero-white{ background:#fff; }
    .hero-box{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,.06);
      padding: clamp(1.25rem, 3vw, 2.25rem); }
    .hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; align-items:center; gap: clamp(1rem, 3vw, 3rem); }
    .hero-content { color: var(--dark); max-width: 800px; }
    .hero-badge{ display:inline-block; background: rgba(255,96,26,.1); padding:.5rem 1rem; border-radius: 50px; font-size:.875rem;
      font-weight:600; margin-bottom:1.5rem; letter-spacing:.05em; color: var(--primary-dark); }
    .hero-title{ font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; line-height:1.1; margin-bottom:1.5rem; color:#111; }
    .hero-subtitle{ font-size: clamp(1.1rem, 2vw, 1.25rem); opacity:.95; margin-bottom:2rem; line-height:1.6; color:#1f2937; }
    .hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
    .btn-hero-primary{ background: var(--primary); color:#fff; font-weight:600; padding:.75rem 1.5rem; border-radius: var(--radius);
      transition: var(--transition); box-shadow: var(--shadow); }
    .btn-hero-primary:hover{ background: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
    .btn-hero-secondary{ background: transparent; color: var(--primary); font-weight:600; padding:.75rem 1.5rem; border-radius: var(--radius);
      border:1px solid var(--primary); transition: var(--transition); }
    .btn-hero-secondary:hover{ background: var(--primary); color:#fff; transform: translateY(-2px); }
    .hero-media{ display:flex; justify-content:center; align-items:center; }
    .hero-logo-xl{ width: clamp(240px, 32vw, 440px); max-height: 520px; object-fit: contain; display:block; }

    /* ====== Sections ====== */
    .section { padding: 5rem 0; }
    .section-soft{ background: var(--soft); }
    .section-dark{ background: var(--gradient-dark); color:#fff; }
    .eyebrow{ display:inline-block; letter-spacing:.08em; text-transform:uppercase; font-size:.875rem; font-weight:700; color: var(--primary);
      margin-bottom:1rem; position: relative; }
    .eyebrow:after{ content:''; position:absolute; bottom:-5px; left:0; width:40px; height:2px; background: var(--primary); }
    .section-title{ font-size: clamp(2rem, 4vw, 2.5rem); font-weight:800; margin-bottom: 1rem; }
    .section-subtitle{ font-size:1.125rem; color: var(--muted); max-width: 600px; margin: 0 auto 3rem; }
    .section-dark .section-subtitle{ color: rgba(255,255,255,.8); }

    /* ====== Cards ====== */
    .card-modern{ background: var(--card); border-radius: var(--radius-lg); border:none; box-shadow: var(--shadow);
      transition: var(--transition); overflow:hidden; height:100%; }
    .card-modern:hover{ transform: translateY(-5px); box-shadow: var(--shadow-xl); }
    .card-icon{ display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px;
      background: var(--gradient-primary); color:#fff; border-radius: var(--radius); font-size:1.5rem; margin-bottom:1.5rem; }
    .card-title{ font-weight:700; margin-bottom: 1rem; }
    .card-text{ color: var(--muted); }

    /* ====== Gallery/Ticker (fix: sin desplazamiento lateral) ====== */
    .gallery-frame{ position:relative; overflow:hidden; }
    .gallery-viewport{ display:flex; gap:12px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom: 2px;
      -webkit-overflow-scrolling:touch; }
    .gallery-viewport::-webkit-scrollbar{ height:8px; }
    .gallery-viewport::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; }
    .gallery-item{ flex:0 0 auto; width:500px; max-width:80vw; aspect-ratio:1/1; scroll-snap-align:center; border-radius:14px;
      overflow:hidden; border:1px solid rgba(16,24,40,.08); position:relative; background:#eee; }
    .gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
    .gallery-btn{ position:absolute; top:50%; transform:translateY(-50%);
      background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.1);
      width:42px; height:42px; border-radius:50%; display:grid; place-items:center; }
    .gallery-btn:focus{ outline:2px solid var(--primary); }
    .gallery-prev{ left:8px; }   /* <- antes estaba en -8px (causaba overflow) */
    .gallery-next{ right:8px; }  /* <- antes estaba en -8px (causaba overflow) */

    /* ====== Modal imágenes ====== */
    .modal-img{ width:100%; height:70vh; max-height:80vh; object-fit:contain; background:#000; }

    /* ====== Accordion ====== */
    .accordion-modern .accordion-item{ border:none; border-radius: var(--radius); margin-bottom:1rem; box-shadow: var(--shadow); overflow:hidden; }
    .accordion-modern .accordion-button{ background:#fff; border:none; font-weight:600; padding:1.25rem; box-shadow:none; }
    .accordion-modern .accordion-button:not(.collapsed){ background: var(--primary); color:#fff; }
    .accordion-modern .accordion-button:focus{ box-shadow:none; border:none; }
    .accordion-modern .accordion-body{ padding:1.25rem; }

    /* ====== Contacto ====== */
    .contact-card{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding:2.5rem; height:100%; }
    .form-control{ padding:.75rem 1rem; border-radius: var(--radius); border:1px solid #e2e8f0; transition: var(--transition); }
    .form-control:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,96,26,.12); }

    /* ====== Footer (full-bleed, sin franja blanca) ====== */
    footer{ background: var(--gradient-dark); color:#fff; padding: 4rem 0 2rem; margin-top:auto; }
    .footer-links{ list-style:none; padding:0; }
    .footer-links li{ margin-bottom:.5rem; }
    .footer-links a{ color: rgba(255,255,255,.75); text-decoration:none; transition: var(--transition); }
    .footer-links a:hover{ color:#fff; }
    .footer-divider{ border-top:1px solid rgba(255,255,255,.1); margin:2rem 0 1.5rem; }
    .social-links{ display:flex; gap:1rem; }
    .social-link{ display:flex; align-items:center; justify-content:center; width:40px; height:40px;
      background: rgba(255,255,255,.1); color:#fff; border-radius: var(--radius); transition: var(--transition); }
    .social-link:hover{ background: var(--primary); transform: translateY(-2px); }

    /* ====== Utilidades y Responsive ====== */
    @keyframes fadeInUp{ from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none} }
    .fade-in-up{ animation: fadeInUp .6s ease forwards; }
    .delay-1{ animation-delay:.1s } .delay-2{ animation-delay:.2s } .delay-3{ animation-delay:.3s }

    @media (max-width: 992px){
      .hero-grid{ grid-template-columns:1fr; text-align:center; }
      .hero-actions{ justify-content:center; }
      .hero-logo-xl{ width: clamp(200px, 55vw, 360px); max-height:360px; margin:0 auto; }
    }
    @media (max-width: 768px){
      .section{ padding: 3rem 0; }
    }
  
    /* === HOTFIX v3: Footer siempre visible sin scroll extra y nada corrido a la izquierda === */
    html, body { height:100%; width:100%; overflow-x:hidden; }
    body { min-height:100dvh; display:flex; flex-direction:column; }
    main { flex:1 0 auto; min-height:0; }
    footer { flex-shrink:0; }
    /* Asegurar centrado de secciones dentro del container */
    .container { margin-left:auto; margin-right:auto; }
    .hero-box { margin-left:auto; margin-right:auto; }
    /* Evitar que filas generen ancho fantasma en móviles (sin alterar Bootstrap en desktop) */
    @media (max-width: 576px){
      .row { --bs-gutter-x: 1rem; margin-left: calc(-.5 * var(--bs-gutter-x)); margin-right: calc(-.5 * var(--bs-gutter-x)); }
      .col, [class^="col-"], [class*=" col-"] { padding-left: calc(.5 * var(--bs-gutter-x)); padding-right: calc(.5 * var(--bs-gutter-x)); }
    }
    /* Botones del ticker dentro del frame para no empujar el viewport */
    .gallery-prev{ left:12px !important; }
    .gallery-next{ right:12px !important; }
    .gallery-item{ max-width:85vw; }
    /* Nada del footer puede desbordar horizontalmente */
    footer, footer * { overflow-x:hidden; }
    /* Quitar margen/padding extra del último bloque antes del footer para que no parezca “encogido” */
    main > section:last-of-type { padding-bottom: 3rem; }
    .navbar-brand {
      display: flex;
      align-items: center;
      font-size: 18px;
    }
    
    .navbar-brand .logo {
      height: 30px;
      margin-right: 8px;
    }

/* ===== INLINE <style> BLOCK #2 ===== */
:root{ --wa:#25D366; --wa-dark:#128C7E; --wa-darker:#075E54; --fb:#1877F2; --fb-dark:#0f5fcc; --dark:#0b0f18; --darker:#0a1324; --light:#fff; --muted:rgba(255,255,255,.7); --fab:60px; }
    .fc-fabs{ position:fixed; right:clamp(12px,2vw,18px); bottom:clamp(12px,2vw,18px); z-index:2147483000; display:flex; flex-direction:column; gap:10px; align-items:flex-end; font-family:inherit }
    .fc-backdrop{ position:fixed; inset:0; background:transparent; z-index:-1 }
    .fc-btn{ width:var(--fab); height:var(--fab); border-radius:50%; display:grid; place-items:center; color:#fff; border:0; cursor:pointer; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.25); transition:.25s }
    .fc-btn:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 14px 36px rgba(0,0,0,.35) }
    .fc-wa{ background:linear-gradient(135deg,var(--wa),var(--wa-dark)) }
    .fc-fb{ background:linear-gradient(135deg,var(--fb),var(--fb-dark)) }
    .fc-card{ position:absolute; right:0; bottom:calc(var(--fab) + 14px); width:min(360px,92vw); background:var(--dark); color:var(--light); border-radius:18px; border:1px solid rgba(255,255,255,.08); box-shadow:0 18px 60px rgba(0,0,0,.5); transform:translateY(10px); opacity:0; transition:.22s; overflow:hidden }
    .fc-card[aria-modal="true"]{ transform:translateY(0); opacity:1 }
    .fc-head{ display:flex; align-items:center; gap:12px; padding:14px; background:linear-gradient(180deg,#0d162c,var(--darker)); border-bottom:1px solid rgba(255,255,255,.06) }
    .fc-avatar{ width:40px; height:40px; border-radius:8px; background:#0e1a33; display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); overflow:hidden }
    .fc-title{ font-weight:700 }
    .fc-status{ font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:6px }
    .fc-status::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--wa) }
    .fc-close{ margin-left:auto; background:transparent; color:#fff; border:0; font-size:24px; cursor:pointer; opacity:.75; width:32px; height:32px; border-radius:50% }
    .fc-close:hover{ opacity:1; background:rgba(255,255,255,.08) }
    .fc-body{ padding:12px 14px; max-height:40vh; overflow:auto; background:var(--dark); display:flex; flex-direction:column; gap:8px }
    .fc-bubble{ max-width:88%; padding:10px 12px; border-radius:14px; line-height:1.35; box-shadow:0 4px 14px rgba(0,0,0,.25); animation:fcIn .2s ease }
    @keyframes fcIn{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
    .fc-bot{ background:#0c1428; border:1px solid rgba(255,255,255,.06); align-self:flex-start; border-bottom-left-radius:4px }
    .fc-user{ background:var(--wa-darker); align-self:flex-end; border-bottom-right-radius:4px }
    .fc-compose{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; background:var(--dark); border-top:1px solid rgba(255,255,255,.08) }
    .fc-compose textarea{ resize:none; border-radius:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.12); background:#0a1324; color:#fff; min-height:44px; outline:none }
    .fc-compose textarea:focus{ border-color:var(--wa); box-shadow:0 0 0 2px rgba(37,211,102,.15) }
    .fc-send{ background:var(--wa); color:#0b1220; border:0; border-radius:12px; padding:0 16px; font-weight:700; cursor:pointer }
    @media (max-width:480px){ :root{--fab:56px} .fc-card{ width:calc(100vw - 24px); right:0 } }