MIX · extractor de estilos
Template: construccionesegmax.com.ar/index.html · mtime: 2025-10-13 14:11
← Volver al álbum Descargar mixed.css Descargar manifest.json
CSS links: 3 Embebidos: 0 Externos: 3 Inline styles: 4 Missing: 0
CSS externos (no embebidos)
CSS embebidos (locales)
No se pudieron embebir CSS locales.
Preview de mixed.css 
/* MIXED CSS PACK */
/* Template: construccionesegmax.com.ar/index.html */
/* Template mtime: 2025-10-13 14:11:51 */

/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.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://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap */

/* ===== INLINE <style> BLOCK #1 ===== */
:root{
      /* Paleta de colores mejorada */
      --primary:#b7ac8e;         /* rojo ladrillo principal */
      --primary-600:#b12723;
      --primary-100:#fde9e8;
      --dark:#0a0f16;
      --text:#1b2430;
      --muted:#6b7280;
      --bg:#f8fafc;
      --card:#ffffff;
      --accent:#0ea5e9;          /* celeste para detalles y foco */
      --radius:16px;
      --shadow:0 6px 24px rgba(2,8,23,.08);
      --shadow-lg:0 20px 60px rgba(2,8,23,.12);
      --gradient-primary: linear-gradient(135deg, var(--primary) 0%, #e74c3c 100%);
      --gradient-dark: linear-gradient(135deg, var(--dark) 0%, #1a202c 100%);
      --gradient-light: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html { 
      scroll-behavior: smooth; 
      font-size: 16px;
    }
    
    body { 
      font-family: 'Inter', system-ui, -apple-system, sans-serif; 
      color: var(--text); 
      background: var(--bg); 
      line-height: 1.6;
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 {
      font-weight: 800;
      line-height: 1.2;
    }

    /* Navbar mejorada */
    .navbar { 
      box-shadow: 0 4px 20px rgba(2,8,23,.08); 
      background: rgba(255, 255, 255, 0.95); 
      backdrop-filter: blur(10px);
      padding: 1rem 0;
      transition: all 0.3s ease;
    }
    
    .navbar.scrolled {
      padding: 0.5rem 0;
      box-shadow: 0 4px 20px rgba(2,8,23,.12);
    }
    
    .navbar-brand{ 
      font-weight:900; 
      letter-spacing:.2px; 
      color: var(--dark); 
      font-size: 1.5rem;
    }
    
    .navbar-brand span{ 
      color: var(--primary); 
      position: relative;
    }
    
    .navbar-brand span::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--gradient-primary);
      border-radius: 2px;
    }
    
    .nav-link { 
      font-weight:600; 
      color:#334155 !important; 
      position: relative;
      transition: all 0.3s ease;
      padding: 0.5rem 1rem !important;
      border-radius: 8px;
    }
    
    .nav-link:hover { 
      color: var(--primary) !important; 
      background: var(--primary-100);
    }
    
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: var(--gradient-primary);
      transition: all 0.3s ease;
      transform: translateX(-50%);
    }
    
    .nav-link:hover::after {
      width: 80%;
    }

    /* Hero mejorado */
    .hero {
      padding: 150px 0 100px;
      background: 
        radial-gradient(ellipse at 10% 10%, rgba(215, 50, 45, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgba(14, 165, 233, 0.08) 0%, transparent 50%),
        var(--gradient-light);
      position: relative;
      overflow: hidden;
    }
    
    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d7322d' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
      opacity: 0.5;
    }
    
    .hero h1 { 
      font-weight:900; 
      letter-spacing:.2px; 
      color: var(--dark); 
      font-size: 3.5rem;
      line-height: 1.1;
      margin-bottom: 1.5rem;
    }
    
    .hero p.lead { 
      color:#465266; 
      font-size: 1.25rem;
      margin-bottom: 2rem;
    }
    
    .badge-chip{
      background:#fff; 
      border:1px solid rgba(2,8,23,.06); 
      border-radius:999px; 
      padding:10px 18px; 
      display:inline-flex; 
      align-items:center; 
      gap:.5rem;
      box-shadow: var(--shadow);
      font-weight: 500;
      transition: all 0.3s ease;
    }
    
    .badge-chip:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(2,8,23,.12);
    }
    
    .badge-chip i{ 
      color:var(--primary); 
      font-size: 1rem;
    }

    .btn-primary{
      --bs-btn-bg: var(--primary);
      --bs-btn-border-color: var(--primary);
      --bs-btn-hover-bg: var(--primary-600);
      --bs-btn-hover-border-color: var(--primary-600);
      --bs-btn-focus-shadow-rgb: 215,50,45;
      border-radius: 12px; 
      padding: 1rem 1.5rem; 
      font-weight:700;
      box-shadow: 0 8px 20px rgba(215,50,45,.15);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 30px rgba(215,50,45,.25);
    }
    
    .btn-primary::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: all 0.6s ease;
    }
    
    .btn-primary:hover::after {
      left: 100%;
    }
    
    .btn-outline-dark{ 
      border-radius:12px; 
      padding:1rem 1.5rem; 
      font-weight: 600;
      transition: all 0.3s ease;
    }
    
    .btn-outline-dark:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(2,8,23,.1);
    }

    /* Secciones mejoradas */
    .section { 
      padding: 100px 0; 
      position: relative;
    }
    
    .section-title { 
      font-weight:900; 
      color:var(--dark); 
      letter-spacing:.2px; 
      font-size: 2.5rem;
      margin-bottom: 1rem;
      position: relative;
      display: inline-block;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 60px;
      height: 4px;
      background: var(--gradient-primary);
      border-radius: 2px;
    }
    
    .section-sub { 
      color:#475569; 
      max-width: 800px; 
      font-size: 1.125rem;
    }

    /* Cards/tiles mejorados */
    .card-soft{
      background: var(--card); 
      border:1px solid rgba(2,8,23,.06); 
      border-radius: var(--radius);
      box-shadow: var(--shadow); 
      height:100%;
      transition: all 0.3s ease;
      overflow: hidden;
      position: relative;
    }
    
    .card-soft:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
    }
    
    .card-soft::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--gradient-primary);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }
    
    .card-soft:hover::before {
      transform: scaleX(1);
    }
    
    .icon-pill{
      width:60px; 
      height:60px; 
      border-radius:16px; 
      background:var(--primary-100); 
      display:grid; 
      place-items:center; 
      color:var(--primary);
      font-size: 1.5rem;
      transition: all 0.3s ease;
    }
    
    .card-soft:hover .icon-pill {
      background: var(--gradient-primary);
      color: white;
      transform: scale(1.1);
    }

    /* Ticker (galería) mejorado */
    .ticker-wrap{
      position: relative; 
      overflow: hidden; 
      border-radius: var(--radius); 
      background:#fff; 
      border:1px solid rgba(2,8,23,.08);
      box-shadow: var(--shadow);
    }
    
    .ticker-track{ 
      display:flex; 
      gap:16px; 
      padding:16px; 
      will-change: transform;
    }
    
    .ticker-item{
      flex: 0 0 auto; 
      width: 500px; 
      height: 500px; 
      border-radius: 14px; 
      overflow: hidden; 
      background:#e2e8f0;
      border:1px solid rgba(2,8,23,.06);
      position: relative;
      transition: all 0.3s ease;
    }
    
    .ticker-item:hover {
      transform: scale(1.02);
    }
    
    .ticker-item img{
      width:100%; 
      height:100%; 
      object-fit: cover; 
      object-position: center;
      display:block; 
      transition: transform .5s ease;
    }
    
    .ticker-item:hover img{ 
      transform: scale(1.05); 
    }
    
    .ticker-controls{
      position:absolute; 
      inset:auto 16px 16px auto; 
      display:flex; 
      gap:10px; 
      z-index:3;
    }
    
    .ticker-controls .btn{ 
      border-radius:12px; 
      padding:.75rem 1rem; 
      background:rgba(255,255,255,.95); 
      border:1px solid rgba(2,8,23,.12); 
      transition: all 0.3s ease;
    }
    
    .ticker-controls .btn:hover{ 
      background:#fff; 
      transform: scale(1.05);
    }

    @media (max-width: 992px){
      .ticker-item{ width: 360px; height: 360px; }
      .hero h1 { font-size: 2.8rem; }
    }
    
    @media (max-width: 768px){
      .hero h1 { font-size: 2.2rem; }
      .section { padding: 80px 0; }
      .section-title { font-size: 2rem; }
    }
    
    @media (max-width: 576px){
      .ticker-item{ width: 86vw; height: 86vw; }
      .hero h1 { font-size: 1.8rem; }
      .hero { padding: 120px 0 60px; }
    }

    /* FAQs mejoradas */
    .accordion-button { 
      font-weight: 600;
      padding: 1.25rem 1.5rem;
      border-radius: 12px !important;
      box-shadow: none !important;
    }
    
    .accordion-button:not(.collapsed){ 
      background:var(--primary-100); 
      color:#0f172a; 
      box-shadow: 0 4px 12px rgba(215,50,45,.1) !important;
    }
    
    .accordion-button::after {
      background-size: 1rem;
    }
    
    .accordion-body {
      padding: 1.25rem 1.5rem;
    }

    /* Contacto mejorado */
    .contact-card{ 
      border-radius: var(--radius); 
      border:1px solid rgba(2,8,23,.08); 
      background:#fff; 
      box-shadow: var(--shadow); 
      transition: all 0.3s ease;
    }
    
    .contact-card:hover {
      box-shadow: var(--shadow-lg);
    }
    
    .form-control, .form-select{ 
      border-radius:12px; 
      padding: 0.75rem 1rem;
      border: 1px solid rgba(2,8,23,.1);
      transition: all 0.3s ease;
    }
    
    .form-control:focus, .form-select:focus {
      box-shadow: 0 0 0 3px rgba(215, 50, 45, 0.1);
      border-color: var(--primary);
    }
    
    .required::after{ content:" *"; color:var(--primary); }

    /* Footer mejorado */
    footer{ 
      background:var(--gradient-dark); 
      color:#cbd5e1; 
      padding: 80px 0 30px; 
      position: relative;
      overflow: hidden;
    }
    
    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
      opacity: 0.3;
    }
    
    .footer-brand{ 
      font-weight:900; 
      color:#fff; 
      letter-spacing:.3px; 
      font-size: 1.75rem;
      margin-bottom: 1rem;
    }
    
    .footer-brand span{ 
      color: var(--primary); 
      position: relative;
    }
    
    .footer-brand span::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--gradient-primary);
      border-radius: 2px;
    }
    
    .footer-links a{ 
      color:#94a3b8; 
      text-decoration:none; 
      transition: all 0.3s ease;
      display: inline-block;
      margin-bottom: 0.5rem;
    }
    
    .footer-links a:hover{ 
      color:#fff; 
      transform: translateX(5px);
    }
    
    .copyright{ 
      color:#8da0b6; 
      border-top:1px solid rgba(148,163,184,.15); 
      padding-top:24px; 
      margin-top:24px; 
      font-size:14px; 
    }

    /* Flotante WhatsApp mejorado */
    .whatsapp-float{
      position: fixed; 
      right: 24px; 
      bottom: 24px; 
      z-index: 9999;
      width:64px; 
      height:64px; 
      border-radius:999px; 
      display:grid; 
      place-items:center;
      background:#25D366; 
      color:#fff; 
      box-shadow: 0 12px 30px rgba(0,0,0,.2);
      transition: all 0.3s ease;
      animation: pulse 2s infinite;
    }
    
    .whatsapp-float:hover{ 
      transform: scale(1.1); 
      box-shadow: 0 16px 40px rgba(0,0,0,.3);
      animation: none;
    }
    
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
      70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
      100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
    }

    /* Efectos de entrada para elementos */
    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.6s ease;
    }
    
    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* Animación para números/estadísticas */
    .counter {
      font-weight: 800;
      font-size: 2.5rem;
      color: var(--primary);
    }
    
    /* Mejoras para enlaces */
    a {
      transition: all 0.3s ease;
    }
    
    /* Mejora para imágenes responsivas */
    img {
      max-width: 100%;
      height: auto;
    }
    
    /* Separadores de sección */
    .section-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(2,8,23,.1), transparent);
      margin: 60px 0;
    }

/* ===== INLINE <style> BLOCK #2 ===== */
/* removed old ticker css */
#trabajos{ background:#fbfbfd; }
.ticker-shell{ position:relative; overflow:hidden; }
.ticker-track{
  display:flex; gap:16px; align-items:center;
  will-change: transform; animation: tickerScroll 45s linear infinite;
}
.ticker-track:hover{ animation-play-state: paused; }
@keyframes tickerScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
.ticker-item{
  flex: 0 0 auto;
  width: 480px; height: 480px;
  border-radius: 14px;
  overflow: hidden;
  background:#fff;
  border:1px solid rgba(2,8,23,.06);
  display:grid; place-items:center;
  position:relative;
}
.ticker-item img{
  width:100%; height:100%; object-fit: contain; object-position:center;
  background:#fff; display:block; transition: transform .35s ease;
}
.ticker-item:hover img{ transform: scale(1.02); }

/* Botones */
.ticker-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px; border:1px solid rgba(2,8,23,.08);
  background:#fff; box-shadow:0 6px 16px rgba(2,8,23,.08);
  display:grid; place-items:center; cursor:pointer; z-index:5;
}
.ticker-btn:active{ transform: translateY(-50%) scale(.97); }
.ticker-prev{ left:8px; }
.ticker-next{ right:8px; }

@media (max-width: 992px){
  .ticker-item{ width: 360px; height: 360px; }
}
@media (max-width: 576px){
  .ticker-item{ width: 86vw; height: 86vw; }
}

/* ===== INLINE <style> BLOCK #3 ===== */
/* --- Quiénes Somos: video responsive sin recortes --- */
.quienes-video{ height:480px; object-fit:cover; display:block; }
@media (max-width: 768px){
  .quienes-video{ height:58vw; }
}

/* ===== INLINE <style> BLOCK #4 ===== */
/* === Ticker robusto (scroll contínuo real, sin romper nada) === */
.ticker-shell{ position:relative; overflow:hidden; }
.ticker-scroll{
  display:flex; gap:16px; align-items:center;
  overflow:hidden; scroll-behavior:smooth;
}
.ticker-item{
  flex:0 0 auto; width:480px; height:480px;
  border-radius:14px; overflow:hidden; background:#fff;
  border:1px solid rgba(2,8,23,.06);
  display:grid; place-items:center; position:relative;
}
.ticker-item img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  display:block; background:#fff; transition:transform .35s ease;
}
.ticker-item:hover img{ transform:scale(1.02); }

.ticker-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px; border:1px solid rgba(2,8,23,.08);
  background:#fff; box-shadow:0 6px 16px rgba(2,8,23,.08);
  display:grid; place-items:center; cursor:pointer; z-index:5;
}
.ticker-prev{ left:8px; } .ticker-next{ right:8px; }

@media (max-width: 992px){ .ticker-item{ width:360px; height:360px; } }
@media (max-width: 576px){ .ticker-item{ width:86vw; height:86vw; } }
Manifest preview
{
    "template": "construccionesegmax.com.ar/index.html",
    "template_mtime": 1760364711,
    "template_mtime_human": "2025-10-13T14:11:51+00:00",
    "css_links_found": [
        "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css",
        "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
    ],
    "css_links_external": [
        "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css",
        "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
    ],
    "css_links_embedded": [],
    "inline_style_blocks": 4,
    "inline_imports_external": [],
    "inline_imports_embedded": [],
    "missing_css_files": []
}