Preview de mixed.css
/* 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/[email protected]/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/[email protected]/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 } }