/* MIXED CSS PACK */
/* Template: adrconstructora.com.ar/index.html */
/* Template mtime: 2025-11-11 17:02:39 */

/* external link (no embedded): https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css */
/* external link (no embedded): https://unpkg.com/aos@2.3.1/dist/aos.css */

/* ===== INLINE <style> BLOCK #1 ===== */
:root{
      /* Paleta gris + contraste */
      --bg:#2f343f;
      --bg-2:#2a2f39;
      --surface:#3a404c;
      --surface-2:#444b59;
      --ink:#eef2f7;
      --muted:#cfd6e0;
      --line:rgba(255,255,255,.15);

      --accent:#FFD60A;
      --radius:16px;
      --radius-lg:24px;
      --shadow:0 20px 30px -12px rgba(0,0,0,.45);
      --shadow-lg:0 40px 60px -20px rgba(0,0,0,.6);

      --transition:all .3s cubic-bezier(.4,0,.2,1);
      --transition-slow:all .6s cubic-bezier(.4,0,.2,1);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;scroll-padding-top:70px}
    body{
      font-family:'Poppins',system-ui,-apple-system,sans-serif;
      background:var(--bg);
      color:var(--ink);
      line-height:1.65;
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      padding-bottom: env(safe-area-inset-bottom);
    }
    img,video{max-width:100%;height:auto;display:block}
    h1,h2,h3,h4,h5{
      font-family:'Playfair Display',serif;
      font-weight:700; line-height:1.2; letter-spacing:-.2px;
      color:#fff;
    }
    p{color:var(--ink)}
    .muted{color:var(--muted)!important}
    a{color:var(--ink); text-underline-offset:2px}
    a:hover{color:#fff}

    /* ===== NAV ===== */
    .nav{
      position:sticky; top:0; z-index:1000;
      backdrop-filter:saturate(140%) blur(10px);
      background:rgba(47,52,63,.96);
      border-bottom:1px solid var(--line);
      transition:var(--transition-slow);
    }
    .nav.scrolled{ box-shadow:var(--shadow) }
    .nav .wrap{max-width:1280px;margin:auto;padding:12px 18px;display:flex;align-items:center;gap:18px}
    .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
    .logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#121212,var(--accent));box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:#111;font-size:16px;font-weight:800}
    .brand h1{font-size:18px;margin:0;background:linear-gradient(90deg,#fff,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .nav ul{list-style:none;margin-left:auto;padding:0;display:flex;gap:18px;align-items:center}
    .nav a{text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;position:relative;padding:8px 0}
    .nav a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent);transition:var(--transition)}
    .nav a:hover::after{width:100%}
    .menu-toggle{display:none;background:none;border:0;font-size:28px;color:var(--ink);cursor:pointer}

    @media (max-width:768px){
      .menu-toggle{display:block}
      .nav ul{
        position:fixed; left:0; right:0; top:64px; bottom:0;
        height:calc(100dvh - 64px);
        background:var(--surface);
        flex-direction:column; display:none; padding:18px; gap:12px;
        border-bottom:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.45);
        overflow:auto;
      }
      .nav ul.open{display:flex}
      body.menu-open{overflow:hidden}
    }

    .btn{
      display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;border:0;cursor:pointer;
      background:linear-gradient(135deg,#141414,var(--accent));color:#141414;font-weight:800;text-decoration:none;box-shadow:var(--shadow)
    }
    .btn.outline{background:transparent;color:var(--accent);border:2px solid var(--accent)}
    .btn.outline:hover{background:var(--accent);color:#222}
    /* === Lightbox de video === */
    .video-lightbox{
      position:fixed; inset:0; z-index:2000;
      background:rgba(0,0,0,.92);
      display:none; align-items:center; justify-content:center;
      padding:16px;
    }
    .video-lightbox.open{ display:flex; }
    .video-lightbox .vb{
      width:min(100%, 920px); max-height:90dvh;
      aspect-ratio:16/9; background:#000;
      border-radius:14px; overflow:hidden;
      box-shadow:0 25px 60px rgba(0,0,0,.6);
    }
    .video-lightbox video{ width:100%; height:100%; object-fit:contain; background:#000; }
    .video-lightbox .close{
      position:absolute; top:12px; right:12px;
      width:44px; height:44px; border-radius:999px;
      display:grid; place-items:center; cursor:pointer;
      background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.18);
      font-size:22px;
    }
    .video-lightbox .close:active{ transform:scale(.96); }
    @media (max-width:768px){
      .video-lightbox .vb{ width:100%; max-height:100dvh; border-radius:0; }
      .video-lightbox .close{ top:10px; right:10px; }
    }
    /* --- Fix interacción en el grid de videos --- */
    .sec-videos .vidwrap{
      position: relative;
      cursor: zoom-in;
    }
    .sec-videos .vidwrap video{
      pointer-events: none;     /* el toque pasa al contenedor */
    }
    .sec-videos .vidwrap .play {
      position: absolute; right: 8px; bottom: 8px;
      width: 42px; height: 42px; border-radius: 999px;
      display: grid; place-items: center;
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.25);
      color: #fff; font-size: 18px;
    }
    @media (hover:hover){
      .sec-videos .vidwrap:hover .play { background: rgba(0,0,0,.7); }
    }

    /* ===== HERO ===== */
    .hero{
      position:relative; overflow:hidden;
      background:
        radial-gradient(900px 500px at 75% -10%, rgba(255,214,10,.08), transparent 60%),
        radial-gradient(700px 400px at -10% 10%, rgba(255,214,10,.06), transparent 60%),
        linear-gradient(180deg,#3b4150 0%, #2f343f 100%);
      border-bottom:1px solid var(--line);
    }
    .hero .wrap{
      max-width:1280px;margin:auto; padding:72px 18px 40px;
      display:grid; grid-template-columns:1.1fr .9fr; gap:28px;
    }
    .hero h2{
      font-size:clamp(28px, 8vw, 48px);
      line-height:1.15;
      margin:0 0 12px;
      background:linear-gradient(to right,#ffffff,var(--accent));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      word-break:break-word; hyphens:auto;
      max-width:24ch; /* recorta ancho en phone */
    }
    /* En pantallas muy chicas uso texto blanco sólido (mejor legibilidad y menos recorte) */
    @media (max-width:420px){
      .hero h2{ background:none; -webkit-text-fill-color:#fff; color:#fff; }
    }
    .hero p{font-size:16px;color:var(--muted);margin:0 0 18px;max-width:60ch}
    .pill{display:inline-flex;gap:8px;align-items:center;font-size:12px;color:#1a1a1a;background:#FFF8D6;padding:7px 12px;border-radius:999px;font-weight:800;margin-bottom:12px}

    .panel{background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg); padding:18px}
    .kv{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .kv .item{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--surface)}
    .kv .item i{font-size:20px;color:var(--accent)}
    .kv .item b{font-size:16px;color:#fff}
    .kv .item small{color:var(--muted);font-size:13px}

    .logo-hero img{max-width:min(200px,80vw);height:auto;border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow)}

    .coverage{margin-top:12px;display:grid;grid-template-columns:1fr 150px;align-items:center;gap:10px;padding:10px;border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
    .cov-title{font-weight:800;color:#fff;display:flex;align-items:center;gap:6px;margin-bottom:2px}
    .cov-title i{color:var(--accent)}
    .map{border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:1/1}
    .map iframe,.map img{width:100%;height:100%;filter:grayscale(35%) contrast(108%) brightness(95%)}

    /* Stacks en móvil */
    @media (max-width:1024px){
      .hero .wrap{grid-template-columns:1fr}
    }
    @media (max-width:768px){
      .kv{grid-template-columns:1fr}       /* antes 2 col: ahora 1 */
      .coverage{grid-template-columns:1fr}
      .map{aspect-ratio:16/10}
    }

    /* ===== SECCIONES ===== */
    section{padding:56px 18px}
    section:nth-of-type(even){background:var(--bg-2)}
    .wrap{max-width:1280px;margin:auto}
    .title{font-size:clamp(24px,6.2vw,40px);margin:0 0 10px;display:inline-block;line-height:1.15}
    .title::after{content:'';display:block;margin-top:8px;width:56px;height:4px;background:var(--accent);border-radius:2px}
    .sub{color:var(--muted);margin:0 0 24px;font-size:16px;max-width:70ch}

    /* ===== CARDS ===== */
    .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
    .card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow)}
    .card i{font-size:24px;color:var(--accent)}
    .card h3{font-size:18px;color:#fff;margin:8px 0 4px}
    .card p{color:var(--ink);opacity:.94}

    .why{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
    .tick{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
    .tick i{color:var(--accent);font-size:22px;margin-top:2px}
    .tick b{color:#fff}
    .tick span{color:var(--muted)}

    /* ===== VIDEOS ===== */
    .sec-videos{padding:0}
    .sec-videos .wrap{max-width:none;padding:0}
    .sec-videos .panel{border-radius:0}
    .grid-videos{padding:12px;display:grid;gap:12px;background:var(--surface);grid-template-columns:repeat(3,1fr)}
    @media (max-width:1024px){.grid-videos{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:640px){.grid-videos{grid-template-columns:1fr}}
    .vcard{display:grid;gap:6px}
    .vcard figcaption{font-size:13px;color:var(--muted)}
    .vidwrap{width:100%;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0b1020;aspect-ratio:16/9}

    /* ===== TICKER ===== */
    .ticker-section{background:#272c35;color:#fff;padding:56px 0}
    .ticker{position:relative;overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
    .ticker-track{display:flex;align-items:center;gap:14px;padding:14px;width:max-content;animation:scrollX 40s linear infinite}
    @keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    .shot{
      width:clamp(200px, 48vw, 460px);
      aspect-ratio:1/1;
      flex:0 0 auto;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12)
    }
    .shot img{width:100%;height:100%;object-fit:cover}

    /* ===== FORM ===== */
    .form{
      position:relative; overflow:hidden;
      background:var(--surface); border:1px solid var(--line); border-radius:20px;
      padding:20px; box-shadow:var(--shadow-lg);
      display:grid; gap:14px; max-width:900px; margin:0 auto;
    }
    .form::before{content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,214,10,.08), transparent); pointer-events:none}
    .form > *{ position:relative; z-index:1 }

    .row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
    .field{display:grid;gap:6px}
    label{font-size:13px;color:#fff;font-weight:800}
    input,select,textarea{
      border:1px solid var(--line); border-radius:12px; padding:12px; font:inherit;
      background:var(--surface-2); color:var(--ink); outline:none; transition:var(--transition);
      width:100%; caret-color:var(--accent); font-size:16px; /* evita zoom iOS */
    }
    input::placeholder,textarea::placeholder{color:#d5dbe5}
    input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,214,10,.18)}
    textarea{min-height:130px;resize:vertical}
    .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;opacity:0;overflow:hidden}
    .note{color:var(--muted);font-size:13px}
    @media (max-width:900px){ .row{grid-template-columns:1fr} }

    /* ===== FOOTER ===== */
    footer{background:#242933;color:#d1d5db;border-top:1px solid rgba(255,255,255,.06)}
    footer .wrap{padding:48px 18px;display:grid;gap:20px;grid-template-columns:1fr 1fr 1fr;max-width:1280px;margin:auto}
    footer a{color:#d1d5db;text-decoration:none}
    footer a:hover{color:#fff}
    footer h4{margin-bottom:8px}
    .copyright{border-top:1px solid rgba(255,255,255,.08);padding:14px 18px;text-align:center;color:#a3aab7;font-size:13px}
    @media (max-width:768px){ footer .wrap{grid-template-columns:1fr;gap:16px} }

    /* === Botones flotantes: stack IG + FB + WA === */
.social-float-container { position: fixed; bottom: 14px; right: 14px; z-index: 9999 }
.social-stack { display: flex; flex-direction: column; gap: 10px }

.social-button { display:block; width:54px; height:54px; border-radius:50%; position:relative;
  box-shadow:0 10px 22px rgba(0,0,0,.32); text-decoration:none; overflow:hidden }
.social-icon { position:absolute; inset:0; display:grid; place-items:center; font-size:22px; color:#fff }

.whatsapp-button { background:#25D366 }
.whatsapp-button:hover { filter:brightness(.92) }

.instagram-button { 
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.instagram-button:hover { filter:brightness(.95) }

.facebook-button { background:#1877F2 }
.facebook-button:hover { filter:brightness(.95) }

/* Tooltip reutilizable */
.social-tooltip{
  position:absolute; right:70px; top:50%; transform:translateY(-50%);
  background:#fff; color:#333; padding:8px 10px; border-radius:10px; font-size:12px; font-weight:700;
  box-shadow:0 8px 18px rgba(0,0,0,.15); opacity:0; visibility:hidden; transition:var(--transition); white-space:nowrap
}
.social-float:hover .social-tooltip{ opacity:1; visibility:visible; right:78px }
@media (max-width:768px){ .social-tooltip{ display:none } }