Álbum de páginas (nodo25)

egmabogados.com.ar

egmabogados.com.ar/index.html

Última modificación: 2025-09-26 19:06

CSS links: 3 style blocks: 5

Abrir MIX (extraer CSS) Factory (usar este estilo)

Si una página no carga en iframe por headers/X-Frame-Options, usá “Abrir”.

CSS externos detectados OK

https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css
https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap

Bloques <style> inline detectados OK

Style #1

:root {
      --bg: #0f2a36;        /* azul petróleo */
      --bg-2: #152f3a;
      --bg-3: #1a3845;
      --gold: #c7a46c;      /* dorado sobrio */
      --gold-light: #d8b887;
      --gold-dark: #b8945a;
      --ink: #1c1f22;
      --muted: #6b7a85;
      --light: #ffffff;
      --card: #f7f9fb;
      --card-hover: #f0f4f8;
      --line: #e7edf3;
      --tick-bg: #0f222b;
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.12);
    }
    
    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }
    
    body {
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
      color: var(--ink);
      line-height: 1.6;
      overflow-x: hidden;
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
      line-height: 1.2;
    }
    
    a {
      color: var(--bg);
      text-decoration: none;
      transition: all 0.3s ease;
    }
    
    a:hover {
      color: var(--gold);
    }
    
    .btn {
      font-weight: 600;
      border-radius: 8px;
      padding: 0.75rem 1.5rem;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    .btn-primary-custom {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
      border: none;
      color: #111;
      box-shadow: 0 4px 15px rgba(199, 164, 108, 0.3);
    }
    
    .btn-primary-custom:hover {
      background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
      color: #111;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(199, 164, 108, 0.4);
    }
    
    .btn-outline-custom {
      border: 2px solid var(--gold);
      color: var(--gold);
      background: transparent;
    }
    
    .btn-outline-custom:hover {
      background: var(--gold);
      color: #111;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(199, 164, 108, 0.3);
    }
    
    .badge-soft {
      background: rgba(199, 164, 108, 0.15);
      color: var(--gold);
      padding: 0.5rem 1rem;
      border-radius: 50px;
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.5px;
    }

    /* Navbar */
    .navbar {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      padding: 1rem 0;
      transition: all 0.3s ease;
    }
    
    .navbar.scrolled {
      padding: 0.5rem 0;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .navbar-brand {
      font-weight: 800;
      font-size: 1.75rem;
      letter-spacing: -0.5px;
    }
    
    .navbar-brand span {
      color: var(--gold);
    }
    
    .nav-link {
      font-weight: 600;
      position: relative;
      padding: 0.5rem 1rem !important;
      border-radius: 6px;
      transition: all 0.3s ease;
    }
    
    .nav-link:not(.btn):hover {
      color: var(--gold) !important;
      background: rgba(199, 164, 108, 0.05);
    }
    
    .nav-link.btn {
      padding: 0.45rem 0.9rem;
    }

    /* Hero */
    #inicio {
      position: relative;
      background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
      color: var(--light);
      overflow: hidden;
    }
    
    .hero-wrap {
      min-height: 85vh;
      display: flex;
      align-items: center;
      position: relative;
    }
    
    .hero-bg {
      position: absolute;
      inset: 0;
      background: url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?q=80&w=2070&auto=format&fit=crop') center/cover no-repeat;
      filter: grayscale(20%) brightness(0.4);
      animation: zoomInOut 20s infinite alternate ease-in-out;
    }
    
    @keyframes zoomInOut {
      0% { transform: scale(1); }
      100% { transform: scale(1.05); }
    }
    
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(15, 42, 54, 0.7) 0%, rgba(21, 47, 58, 0.8) 100%);
    }
    
    .hero-content {
      position: relative;
      z-index: 2;
    }
    
    .hero h1 {
      font-weight: 800;
      font-size: 3.5rem;
      line-height: 1.1;
      margin-bottom: 1.5rem;
    }
    
    .hero p {
      color: #d8e3ea;
      font-size: 1.25rem;
      margin-bottom: 2rem;
    }
    
    .hero-cta .btn {
      margin-right: 1rem;
      margin-bottom: 1rem;
    }
    
    /* Secciones */
    .section {
      padding: 100px 0;
      position: relative;
    }
    
    .section-title {
      font-weight: 800;
      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(--gold);
      border-radius: 2px;
    }
    
    .section-subtitle {
      color: var(--muted);
      font-size: 1.2rem;
      margin-bottom: 3rem;
    }

    /* Cards */
    .card-soft {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
      transition: all 0.3s ease;
      overflow: hidden;
    }
    
    .card-soft:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
      background: var(--card-hover);
    }
    
    .card-icon {
      width: 70px;
      height: 70px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: linear-gradient(135deg, #eef3f7 0%, #e2e9f1 100%);
      color: var(--bg);
      font-size: 28px;
      margin-bottom: 1.5rem;
      transition: all 0.3s ease;
    }
    
    .card-soft:hover .card-icon {
      transform: scale(1.05);
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
      color: #111;
    }

    /* Equipo */
    .team-photo {
      width: 100%;
      aspect-ratio: 1/1;
      border-radius: 16px;
      object-fit: cover;
      filter: saturate(0.95) contrast(1.02);
      transition: all 0.3s ease;
    }
    
    .team-photo:hover {
      transform: scale(1.03);
      filter: saturate(1.1) contrast(1.05);
    }

    /* Ticker (galería 500x500) */
    .ticker-section {
      background: var(--tick-bg);
      position: relative;
      overflow: hidden;
    }
    
    .ticker-shell {
      position: relative;
      overflow: hidden;
    }
    
    .ticker-track {
      display: flex;
      gap: 20px;
      padding: 10px;
      scroll-behavior: smooth;
      overflow: hidden;
    }
    
    .tk-item {
      flex: 0 0 500px;
      height: 500px;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
    }
    
    .tk-item:hover {
      transform: scale(1.02);
      border-color: rgba(255, 255, 255, 0.3);
    }
    
    .tk-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: all 0.5s ease;
    }
    
    .tk-item:hover img {
      transform: scale(1.05);
    }
    
    .ticker-actions {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
      padding: 0 20px;
    }
    
    .ticker-btn {
      pointer-events: auto;
      border: none;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      color: #fff;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      transition: all 0.3s ease;
      opacity: 0.8;
    }
    
    .ticker-btn:
/* ...cortado... */

Style #2

.hero-side-image{
        max-width: 420px;
        width: 100%;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
      }
      @media (max-width: 991.98px){
        .hero-side-image{ max-width: 240px; }
      }

Style #3

#estudio.est-v4{ --v4-line:#e1e7ef; --v4-ink:#243041; --v4-muted:#6f7a89; --v4-card:#fff; --v4-gold:#c9a66b; }

    /* Lead horizontal */
    #estudio.est-v4 .lead-card{
      display:grid; grid-template-columns: 220px 1fr; gap:22px;
      border:2px solid #d1dae5; border-radius:16px; background:var(--v4-card);
      padding:22px; box-shadow:0 3px 14px rgba(0,0,0,.06); margin: 12px 0 22px;
    }
    #estudio.est-v4 .lead-photo{ border-radius:14px; overflow:hidden; background:#f6f8fb; border:1px solid var(--v4-line); }
    #estudio.est-v4 .lead-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
    #estudio.est-v4 .lead-name{ font-size:1.1rem; font-weight:700; margin: 2px 0 2px; color:var(--v4-ink); }
    #estudio.est-v4 .lead-role{ font-size:.95rem; color:var(--v4-muted); margin-bottom:8px; }
    #estudio.est-v4 .lead-bio p{ margin:0 0 .6rem; color:var(--v4-muted); }

    /* Cards del resto del equipo */
    #estudio.est-v4 .estv4-card{
      border:2px solid #d1dae5; border-radius:16px; background:var(--v4-card);
      padding:22px; box-shadow:0 3px 12px rgba(0,0,0,.06); height:100%;
      transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    }
    #estudio.est-v4 .estv4-card:hover{ transform: translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.08); border-color:#c6d0dc; }
    #estudio.est-v4 .estv4-head{ display:flex; align-items:center; gap:14px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed var(--v4-line); }
    #estudio.est-v4 .estv4-avatar{ width:80px; height:80px; border-radius:50%; overflow:hidden; border:1px solid var(--v4-line); background:#f6f8fb; flex:0 0 80px; }
    #estudio.est-v4 .estv4-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
    #estudio.est-v4 .estv4-name{ font-weight:700; color:var(--v4-ink); font-size:1.03rem; }
    #estudio.est-v4 .estv4-role{ font-size:.95rem; color:var(--v4-muted); }
    #estudio.est-v4 .estv4-bio{ color:var(--v4-muted); font-size:1.02rem; line-height:1.7; position:relative; }
    #estudio.est-v4 .estv4-bio p{ margin:0 0 .65rem; }

    /* Clamp bios for uniform height */
    #estudio.est-v4 .estv4-card:not(.expanded) .estv4-bio{
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
      max-height: 8.5em;
    }
    #estudio.est-v4 .estv4-card:not(.expanded) .estv4-bio::after{
      content:"";
      position:absolute; left:0; right:0; bottom:0; height:2.5rem;
      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 70%, #fff 100%);
      pointer-events:none;
      border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
    }
    #estudio.est-v4 .estv4-readmore{
      display:inline-block; margin-top:.35rem; font-size:.9rem; font-weight:600;
      background: transparent; border:0; color:#2c5cc5; text-decoration: underline; text-underline-offset:3px; cursor:pointer;
    }

    /* Mobile fixes */
    @media (max-width: 768px){
      #estudio.est-v4 .lead-card{ grid-template-columns: 180px 1fr; }
    }
    @media (max-width: 576px){
      #estudio.est-v4 .lead-card{ grid-template-columns: 1fr; padding:16px; gap:14px; }
      #estudio.est-v4 .lead-photo{ height: 220px; }
      #estudio.est-v4 .lead-bio{ font-size: .98rem; line-height: 1.6; }
    }
    @media (max-width: 400px){
      #estudio.est-v4 .lead-photo{ height: 180px; }
    }
    #estudio.est-v4 img{ max-width:100%; height:auto; }

Style #4

#opiniones .card-icon{
        background: linear-gradient(135deg, #eef3f7 0%, #e2e9f1 100%);
        border-radius: 12px;
        display: grid; place-items: center; font-size: 22px;
      }

Style #5

/* FAQs: borde + acentos dorados, sin cambiar tipografías ni color de texto */
:root { --faq-gold: #c9a66b; }

#faqs .faq-item{
  background: transparent !important;
  border: 1.5px solid rgba(0,0,0,.25);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 14px;
  box-shadow: none !important;
}

/* Espaciado interno del bloque */
#faqs details{ padding: 14px 18px; }

/* Puntito dorado al inicio del summary */
#faqs summary{
  display: flex; align-items: center; gap: .5rem;
  list-style: none;
  cursor: pointer;
}
#faqs summary::-webkit-details-marker{ display:none; }
#faqs summary::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--faq-gold);
  flex: 0 0 6px;
}

/* Barrita dorada al abrir (solo el borde izquierdo) */
#faqs details[open]{
  border-left: 3px solid var(--faq-gold);
  border-radius: 14px;
}

crecimientoseguro.com

crecimientoseguro.com/index.html

Última modificación: 2025-09-25 13:09

CSS links: 3 style blocks: 5

Abrir MIX (extraer CSS) Factory (usar este estilo)

Si una página no carga en iframe por headers/X-Frame-Options, usá “Abrir”.

CSS externos detectados OK

https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css
https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap

Bloques <style> inline detectados OK

Style #1

:root{
    /* === Marca y acento (verde + azul) === */
    --brand:        #22C55E;   /* verde (emerald) */
    --brand-light:  #86EFAC;   /* tinte claro del brand */
    --brand-dark:   #16A34A;   /* sombra del brand */

    --accent:       #2563EB;   /* azul (royal/indigo) */
    --accent-light: #60A5FA;   /* tinte claro del acento */
    --accent-dark:  #1E40AF;   /* sombra del acento */

    /* === Neutros (fríos, acordes a la paleta) === */
    --dark:         #111827;   /* gris carbón frío */
    --dark-light:   #1F2937;   /* superficie oscura */
    --muted:        #6B7280;   /* texto secundario */
    --light:        #F8FAFC;   /* fondos suaves */
    --white:        #FFFFFF;

    /* === Gradientes coherentes con la nueva marca === */
    --gradient-primary:   linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--brand-light) 0%, var(--accent-light) 100%);
    --gradient-dark:      linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%);

    /* === Sombras con tinte del acento (sutiles) === */
    --shadow-sm: 0 4px 12px rgba(37, 99, 235, 0.10);
    --shadow-md: 0 8px 24px rgba(37, 99, 235, 0.14);
    --shadow-lg: 0 16px 48px rgba(37, 99, 235, 0.18);

    /* === Radios (se mantienen) === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
  }

  /* Alternativa (verde + naranja): descomentar para usar
  :root{
    --brand:        #22C55E;
    --brand-light:  #86EFAC;
    --brand-dark:   #16A34A;

    --accent:       #F97316;   /* naranja */
    --accent-light: #FDBA74;
    --accent-dark:  #C2410C;

    --dark:         #111827;
    --dark-light:   #1F2937;
    --muted:        #6B7280;
    --light:        #F8FAFC;
    --white:        #FFFFFF;

    --gradient-primary:   linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--brand-light) 0%, var(--accent-light) 100%);
    --gradient-dark:      linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%);

    --shadow-sm: 0 4px 12px rgba(249, 115, 22, 0.10);
    --shadow-md: 0 8px 24px rgba(249, 115, 22, 0.14);
    --shadow-lg: 0 16px 48px rgba(249, 115, 22, 0.18);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
  }
  */
/* Opcional: contraste de texto si usás badges/btn sólidos */
  .text-on-brand   { color: #FFFFFF; }    /* sobre --brand / --accent */
  .text-on-light   { color: #2B2222; }    /* sobre --light/--white */


    * {
      box-sizing: border-box;
    }

    html, body {
      scroll-behavior: smooth;
      font-family: 'Poppins', sans-serif;
      line-height: 1.6;
    }

    body {
      background: var(--light);
      color: var(--dark);
      overflow-x: hidden;
    }

    a {
      color: var(--brand);
      text-decoration: none;
      transition: all 0.3s ease;
    }

    a:hover {
      color: var(--brand-dark);
    }

    h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 1rem;
    }

    .btn {
      border-radius: var(--radius-md);
      font-weight: 500;
      padding: 0.75rem 1.5rem;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .btn-brand {
      background: var(--gradient-primary);
      color: var(--white);
      border: none;
      box-shadow: var(--shadow-sm);
    }

    .btn-brand:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      color: var(--white);
    }

    .btn-outline-brand {
      border: 2px solid var(--brand);
      color: var(--brand);
      background: transparent;
    }

    .btn-outline-brand:hover {
      background: var(--brand);
      color: var(--white);
      transform: translateY(-2px);
    }

    .text-accent {
      color: var(--accent);
    }

    .text-gradient {
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .badge-soft {
      background: rgba(37, 99, 235, 0.1);
      color: var(--brand-dark);
      font-weight: 600;
      padding: 0.5rem 1rem;
      border-radius: 50px;
    }

    .section-title {
      font-weight: 800;
      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-title.center:after {
      left: 50%;
      transform: translateX(-50%);
    }

    .section-subtitle {
      color: var(--muted);
      font-size: 1.1rem;
      max-width: 600px;
      margin: 0 auto 3rem;
    }

    /* Navbar */
    .navbar {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 18px rgba(20, 20, 43, 0.06);
      padding: 1rem 0;
      transition: all 0.3s ease;
    }

    .navbar.scrolled {
      padding: 0.5rem 0;
      box-shadow: var(--shadow-md);
    }

    .navbar-brand {
      font-weight: 800;
      font-size: 1.5rem;
    }

    .navbar .nav-link {
      font-weight: 500;
      position: relative;
      margin: 0 0.5rem;
    }

    .navbar .nav-link:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--gradient-primary);
      transition: width 0.3s ease;
    }

    .navbar .nav-link:hover:after,
    .navbar .nav-link.active:after {
      width: 100%;
    }

    /* Hero */
    .hero {
      padding: 120px 0 80px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #F0FDF4 0%, #EFF6FF 100%);
    }

    .hero:before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 800px;
      height: 800px;
      background: var(--gradient-primary);
      opacity: 0.05;
      border-radius: 50%;
      z-index: 0;
    }

    .hero:after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -10%;
      width: 600px;
      height: 600px;
      background: var(--gradient-secondary);
      opacity: 0.05;
      border-radius: 50%;
      z-index: 0;
    }

    .hero-content {
      position: relative;
      z-index: 1;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: 50px;
      background: rgba(37, 99, 235, 0.1);
      color: var(--brand-dark);
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 1.5rem;
    }

    .hero h1 {
      font-weight: 800;
      font-size: 3.5rem;
      line-height: 1.1;
      margin-bottom: 1.5rem;
    }

    .hero p.lead {
      font-size: 1.2rem;
      color: var(--muted);
      margin-bottom: 2rem;
    }

    .trust-badges {
      display: flex;
      gap: 1.5rem;
      margin-top: 2rem;
    }

    .trust-badge {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9rem;
      color: var(--muted);
    }

    .trust-badge i {
      color: var(--brand);
      font-size: 1.2rem;
    }

    .hero-card {
      background: var(--white);
      border-radius: var(--radius-xl);
      padding: 2rem;
      box-shadow: var(--shadow-lg);
      position: relative;
      z-index: 1;
      overflow: hidden;
    }

    .hero-card:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--gradient-pri
/* ...cortado... */

Style #2

/* === Logo de navbar: tamaño y redondeo === */
.navbar-brand .brand-img{
  display:block;
  height: 40px;         /* ajustá a gusto */
  width: auto;          /* mantiene proporción */
  border-radius: 10px;  /* redondeo del logo */
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

@media (max-width: 575.98px){
  .navbar-brand .brand-img{ height: 34px; }
}

/* === Marco con gradiente animado + “titilar” suave === */
.brand-img-wrap{
  --r: 12px;                   /* radio del marco */
  --pad: 3px;                  /* grosor del marco */
  --g1: var(--brand, #853D34);
  --g2: var(--accent, #501414);

  position: relative;
  display: inline-grid;
  place-items: center;
  padding: var(--pad);
  border-radius: calc(var(--r) + var(--pad));
  background: linear-gradient(120deg, var(--g1), var(--g2), var(--g1));
  background-size: 200% 200%;
  animation: brandSheen 8s ease-in-out infinite;
  /* brillo externo muy sutil */
  box-shadow: 0 0 0 0 rgba(133,61,52,.0);
}

/* halo animado (titila) */
.brand-img-wrap::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius: calc(var(--r) + var(--pad) + 6px);
  background: radial-gradient(40% 60% at 50% 50%, rgba(133,61,52,.20), transparent 60%);
  filter: blur(6px);
  animation: brandPulse 3.6s ease-in-out infinite;
  pointer-events: none;
}

/* Hover: un poquito más de vida */
.navbar-brand:hover .brand-img-wrap{
  animation-duration: 5.5s;
}
.navbar-brand:hover .brand-img-wrap::after{
  animation-duration: 2.6s;
}

/* Animaciones */
@keyframes brandSheen{
  0%,100%{ background-position: 0% 50%; }
  50%    { background-position: 100% 50%; }
}
@keyframes brandPulse{
  0%,100%{ opacity:.25; transform: scale(1); }
  50%    { opacity:.45; transform: scale(1.03); }
}

/* Respeto por reduce motion */
@media (prefers-reduced-motion: reduce){
  .brand-img-wrap,
  .brand-img-wrap::after{
    animation: none !important;
  }
}

Style #3

.hero { position: relative; overflow: hidden; }
      .hero-badge { font-size:.95rem; padding:.5rem .75rem; border-radius:999px; background: rgba(37,99,235,.1); }
      .hero-card .feature-icon { min-width:3rem; min-height:3rem; display:grid; place-items:center; }
      .trust-badge { font-size:.9rem; }
  
      .hero-title{
        font-weight:800; line-height:1.1; letter-spacing:-.02em;
        margin:.25rem 0 0; font-size:clamp(2rem, 4.2vw, 3.2rem);
      }
      .hero-title .brand{ color: var(--brand); }
  
      .fade-in-up{ opacity:0; transform:translateY(12px); animation: fadeUp .6s ease forwards; }
      .delay-1{ animation-delay:.08s; } .delay-2{ animation-delay:.16s; } .delay-3{ animation-delay:.24s; }
      @keyframes fadeUp{ to{ opacity:1; transform:none; } }
  
      @media (min-width: 992px){
        .hero-card{ margin-top:1.25rem !important; }
      }

Style #4

/* Avatares cuadrados, sin deformaciones */
      .avatar-figure{
        position: relative;
        width: 100px;
        height: 100px;
        margin: 0;
        flex: 0 0 auto;
      }
      .avatar-img{
        width: 100%;
        height: 100%;
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: 16px; /* coincide con .rounded-4 */
        display: block;
      }
  
      /* Tip azul consistente (círculo perfecto) */
      .status-tip{
        position: absolute;
        right: -4px;
        bottom: -4px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #0d6efd; /* azul Bootstrap; podés usar var(--brand) si querés */
        color: #fff;
        display: grid;
        place-items: center;
        border: 2px solid #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,.15);
        line-height: 1; /* evita estirado vertical */
      }
      .status-tip .bi{ font-size: 14px; }
  
      /* Botones con ícono alineado */
      .btn-icon{
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        line-height: 1.1;
        padding-inline: .65rem .8rem;
        white-space: nowrap;
      }
      .btn-icon .bi{ font-size: 1rem; }
  
      /* Tarjeta suave: usa tus variables si querés */
      .card-soft{
        border: 1px solid rgba(0,0,0,.06);
        border-radius: var(--radius-lg, 16px);
        box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.08));
      }
  
      /* Micro-ajustes responsive */
      @media (max-width: 575.98px){
        .avatar-figure{ width: 88px; height: 88px; }
        .status-tip{ width: 22px; height: 22px; }
        .status-tip .bi{ font-size: 12px; }
      }

Style #5

/* Ajustes del ticker */
      #mini-ticker { --ticker-gap: 16px; --ticker-speed: 18s; }
  
      .ticker-wrap{
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-lg, 16px);
        box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.08));
        /* Fading suave en bordes */
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
        background: var(--light, #F8F5F4);
      }
      .ticker-track{
        display: flex;
        gap: var(--ticker-gap);
        padding: var(--ticker-gap);
        width: max-content;
        animation: tickerScroll var(--ticker-speed) linear infinite;
      }
      .ticker-wrap:hover .ticker-track{ animation-play-state: paused; }
  
      .slide{
        flex: 0 0 auto;
        width: clamp(220px, 32vw, 420px);
        aspect-ratio: 16/10; /* cambiá si querés: 1/1 o 4/3 */
        border-radius: var(--radius-md, 12px);
        overflow: hidden;
        background: #eee;
      }
      .slide img{
        width: 100%; height: 100%;
        object-fit: cover; display: block;
      }
  
      @keyframes tickerScroll{
        from { transform: translateX(0); }
        to   { transform: translateX(calc(-50% - var(--ticker-gap))); }
        /* -50% porque duplicamos 3→6 slides */
      }
  
      /* Menos movimiento si el usuario lo prefiere */
      @media (prefers-reduced-motion: reduce){
        .ticker-track{ animation: none; }
      }
  
      /* Pequeños refinamientos de spacing según viewport */
      @media (min-width: 992px){
        #mini-ticker{ padding-block: 1.25rem; }
      }

selvacataratastraslados.com

selvacataratastraslados.com/index.html

Última modificación: 2025-09-24 16:57

CSS links: 3 style blocks: 3

Abrir MIX (extraer CSS) Factory (usar este estilo)

Si una página no carga en iframe por headers/X-Frame-Options, usá “Abrir”.

CSS externos detectados OK

https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css
https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap

Bloques <style> inline detectados OK

Style #1

:root {
      /* Paleta mejorada */
      --green: #2E8B57;
      --green-dark: #1e6c45;
      --green-light: #e8f5e9;
      --blue: #1D71B8;
      --blue-dark: #15568a;
      --blue-light: #e3f2fd;
      --accent: #F4A300;
      --accent-dark: #d18a00;
      --accent-light: #fff3cd;
      --ink: #0b1b1b;
      --soft: #f8fbfc;
      --muted: #6b7a7a;
      --white: #ffffff;
      --shadow: 0 10px 30px rgba(0,0,0,0.08);
      --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
      --radius: 16px;
      --radius-lg: 24px;
    }

    * { box-sizing: border-box; }
    html, body { width:100%; max-width:100%; }
    body {
      font-family: 'Poppins', sans-serif;
      color: var(--ink);
      background: var(--white);
      scroll-behavior: smooth;
      line-height: 1.6;
      overflow-x: hidden; /* evita scroll horizontal en mobile */
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
    }

    
        /* ¿Por qué elegirnos? */
        .why li {
          margin: 1rem 0;
          display: flex;
          gap: 1rem;
          align-items: flex-start;
        }
    
        .why i {
          color: var(--green);
          background: var(--green-light);
          width: 24px;
          height: 24px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin-top: 2px;
        }

    .btn-brand {
      background: linear-gradient(135deg, var(--green), var(--blue));
      color: var(--white);
      border: 0;
      border-radius: 50px;
      padding: 12px 28px;
      font-weight: 600;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(29, 113, 184, 0.3);
      position: relative;
      overflow: hidden;
    }
    .btn-brand:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(29, 113, 184, 0.4); color: var(--white); }
    .btn-brand:active { transform: translateY(-1px); }
    .btn-brand::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: left 0.5s;
    }
    .btn-brand:hover::after { left: 100%; }

    .btn-outline-brand {
      border: 2px solid var(--blue);
      color: var(--blue);
      border-radius: 50px;
      padding: 10px 26px;
      font-weight: 600;
      transition: all 0.3s ease;
      background: transparent;
    }
    .btn-outline-brand:hover { background: var(--blue); color: var(--white); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(29, 113, 184, 0.3); }

    .link-cta {
      color: var(--blue);
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s ease;
      position: relative;
      word-break: break-word;
    }
    .link-cta:hover { color: var(--blue-dark); }
    .link-cta::after {
      content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background: var(--blue);
      transition: width 0.3s ease;
    }
    .link-cta:hover::after { width: 100%; }

    /* Navbar */
    .navbar {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      padding: 12px 0;
      transition: all 0.3s ease;
    }
    .navbar.scrolled { padding: 8px 0; box-shadow: 0 6px 24px rgba(0,0,0,0.1); }
    .navbar-brand { font-weight: 800; font-size: 1.5rem; color: var(--green); }
    .navbar-brand strong {
      background: linear-gradient(135deg, var(--green), var(--blue));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .nav-link { font-weight: 500; color: var(--ink) !important; margin: 0 8px; position: relative; transition: color 0.3s ease; }
    .nav-link::after{
      content:''; position:absolute; width:0; height:2px; bottom:0; left:0;
      background: linear-gradient(90deg, var(--green), var(--blue)); transition: width .3s ease;
    }
    .nav-link:hover::after, .nav-link.active::after { width:100%; }
    .navbar-toggler { border: none; padding: 4px 8px; }
    .navbar-toggler:focus { box-shadow: none; }

    /* Hero */
    header.hero {
      background:
        radial-gradient(ellipse at 80% 0%, rgba(29, 113, 184, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 100%, rgba(46, 139, 87, 0.1) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f9fbfc 70%, #ffffff 100%);
      padding-top: 8rem; padding-bottom: 5rem; position: relative; overflow: hidden;
    }
    .hero::before {
      content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="none"><path d="M0,50 Q250,30 500,50 T1000,50 V100 H0 Z" fill="%23f8fbfc"/></svg>') bottom center no-repeat;
      background-size: cover; z-index: 0;
    }
    .hero-badge {
      display: inline-flex; gap: .5rem; align-items: center;
      background: rgba(46, 139, 87, 0.08); color: var(--green);
      border: 1px solid rgba(46, 139, 87, 0.18); padding: 8px 16px; border-radius: 50px;
      font-weight: 600; font-size: .9rem; backdrop-filter: blur(5px);
    }
    .hero-illu {
      border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--white);
      padding: 1.5rem; position: relative; z-index: 1;
      transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
      transition: transform 0.5s ease;
    }
    .hero-illu:hover { transform: perspective(1000px) rotateY(0) rotateX(0); }
    .hero-illu::before {
      content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px;
      background: linear-gradient(135deg, var(--green), var(--blue)); border-radius: calc(var(--radius-lg) + 10px);
      z-index: -1; opacity: 0.1;
    }
    h1.display-5 {
      font-size: 3.2rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem;
      background: linear-gradient(135deg, var(--ink) 0%, var(--blue) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }

    /* Secciones */
    .section { padding: 100px 0; position: relative; }
    .section-title {
      font-weight: 800; font-size: 2.5rem; margin-bottom: 1rem; position: relative; display: inline-block;
    }
    .section-title::after {
      content: ''; position: absolute; width: 60px; height: 4px;
      background: linear-gradient(90deg, var(--green), var(--blue)); bottom: -10px; left: 0; border-radius: 2px;
    }
    .text-center .section-title::after { left: 50%; transform: translateX(-50%); }
    .subtle { color: var(--muted); font-size: 1.1rem; }

    /* Cards de servicios */
    .svc-card {
      height: 100%; border: 1px solid #e9eef1; border-radius: var(--radius);
      padding: 2rem 1.5rem; transition: all 0.4s ease; background: var(--white);
      position: relative; overflow: hidden;
    }
    .svc-card::before {
      content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px;
      background: linear-gradient(90deg, var(--green), var(--blue));
      transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
    }
    .svc-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
    .svc-card:hover::before { transform: scaleX(1); }
    .svc-icon {
      display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 18px;
      background: linear-gradient(135deg, var(--green-light), var(--blue-light));
      color: var(--blue); font-size: 1.8rem; margin-bottom: 1.5rem; transition: all 0.3s ease;
    }
    .svc-card:hover .svc-icon { transform: scale(1.1) rotate(5deg); background: linear-gradient(135deg, var(--green), var(--blue)); color: var(--whit
/* ...cortado... */

Style #2

/* ========= Ajustes generales ========= */
    #porque{ padding:80px 0; }
    #porque .why{ padding-left:0; }
    #porque .why-item{
      display:flex; align-items:flex-start; gap:10px;
      font-size:1.05rem; margin:12px 0;
      will-change: transform, opacity;
      transform: translateZ(0);
      opacity:.98;
      /* Zoom in/out rápido + vaivén leve */
      animation: why-zoom .95s ease-in-out infinite alternate,
                 why-shift 1.6s ease-in-out infinite alternate;
    }
    #porque .why-item:nth-child(odd){
      animation-delay: .05s, .1s;
    }
    #porque .why-item:nth-child(2){ animation-duration:.9s, 1.4s; }
    #porque .why-item:nth-child(3){ animation-duration:.85s, 1.35s; }
    #porque .why-item:nth-child(4){ animation-duration:.92s, 1.5s; }
    #porque .why-item:nth-child(5){ animation-duration:.88s, 1.3s; }
  
    #porque .why-item i{
      color:#2ecc71; font-size:1.15rem; margin-top:2px;
      animation: icon-pop 1.2s ease-in-out infinite alternate;
      filter: drop-shadow(0 2px 6px rgba(46,204,113,.25));
    }
  
    /* ========= Título con barrido rápido ========= */
    #porque .pro-title{
      font-size:2.25rem; font-weight:800; color:#1f2d3a; margin-bottom:30px; position:relative; overflow:hidden;
    }
    #porque .pro-title::after{
      content:""; position:absolute; left:0; bottom:-10px; height:5px; width:140px;
      background: linear-gradient(90deg, #2ecc71, #3498db, #2ecc71);
      background-size: 250% 100%;
      border-radius:3px;
      animation: bar-scan 1.4s ease-in-out infinite alternate;
    }
  
    /* ========= Imagen zoom-bounce rápido ========= */
    #porque .img-zoom-wrap{ display:inline-block; }
    #porque .img-zoom-pro{
      display:block; width:100%; border-radius:16px; transform: translateZ(0);
      animation: img-zoom .95s ease-in-out infinite alternate;
      will-change: transform;
    }
  
    /* ========= Keyframes ========= */
    @keyframes bar-scan{
      0%{ background-position: 0% 0; transform: translateX(0); }
      100%{ background-position: 100% 0; transform: translateX(8px); }
    }
    @keyframes why-zoom{
      0%  { transform: scale(0.985); }
      100%{ transform: scale(1.015); }
    }
    @keyframes why-shift{
      0%  { translate: -3px 0; }
      100%{ translate:  3px 0; }
    }
    @keyframes icon-pop{
      0%  { transform: scale(1); }
      100%{ transform: scale(1.12); }
    }
    @keyframes img-zoom{
      0%  { transform: scale(0.985); }
      100%{ transform: scale(1.03); }
    }
  
    /* ========= Responsive ========= */
    @media (max-width:576px){
      #porque{ padding:64px 0; }
      #porque .pro-title{ font-size:1.95rem; }
      #porque .why-item{ font-size:1rem; }
    }
  
    /* ========= Accesibilidad ========= */
    @media (prefers-reduced-motion: reduce){
      #porque *{ animation:none !important; transition:none !important; }
    }

Style #3

/* Ticker accesible + modal (se mantiene como en tu archivo) */
    .ticker-viewport{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:none; }
    .ticker-viewport::-webkit-scrollbar{ display:none; }
    .ticker-track{ display:flex; gap:16px; padding:4px 6px; }
    .tile{ scroll-snap-align:start; flex:0 0 auto; width:clamp(220px, 30vw, 360px); aspect-ratio:1/1;
      border-radius:14px; overflow:hidden; background:#eaeaea; box-shadow:0 6px 18px rgba(0,0,0,.08); }
    .tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
    .tile:hover img{ transform:scale(1.04); }
    .ticker-btn{ width:44px; height:44px; border:0; border-radius:999px; display:grid; place-items:center; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12); }
    .ticker-btn:active{ transform:scale(.98); }
    .dots{ display:flex; align-items:center; gap:10px; }
    .dots button{ width:9px; height:9px; border-radius:999px; border:0; background:#cfd4da; }
    .dots button.active{ width:22px; height:9px; border-radius:999px; background:#111; }
    .gmodal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1090; }
    .gmodal.show{ display:flex; }
    .gmodal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.75); backdrop-filter:saturate(120%) blur(2px); }
    #gImage{ position:relative; z-index:1; max-width:92vw; max-height:90vh; object-fit:contain; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35); background:#000; }
    .gmodal-close{ position:absolute; top:14px; right:16px; z-index:2; width:42px; height:42px; border:0; border-radius:999px; background:#fff; font-size:28px; line-height:1; box-shadow:0 6px 18px rgba(0,0,0,.25); }
    .gmodal-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:46px; border:0; border-radius:999px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.25); }
    .gprev{ left:18px; } .gnext{ right:18px; }
    @media (max-width: 576px){ .tile{ width:72vw; } .gmodal-nav{ width:40px; height:40px; } }

miori360.com.ar

miori360.com.ar/index.html

Última modificación: 2025-09-23 21:22

CSS links: 3 style blocks: 5

Abrir MIX (extraer CSS) Factory (usar este estilo)

Si una página no carga en iframe por headers/X-Frame-Options, usá “Abrir”.

CSS externos detectados OK

https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css
https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap

Bloques <style> inline detectados OK

Style #1

/* === MIORI 360 – Paleta basada en el logo === */
  :root{
    /* Azul navy (círculo y texto "360 CONSULTING") */
    --brand:        #0B2E5C;
    --brand-dark:   #072248;
    --brand-light:  #E8EFF8;
  
    /* Dorado (texto "MIORI") */
    --accent:       #C69A2B;
    --accent-dark:  #9E7A1F;
    --accent-light: #F5E7C8;
  
    /* Texto / superficies */
    --ink:    #1B2430;
    --muted:  #657289;
    --bg:     #F7FAFC;
    --white:  #FFFFFF;
    --border: #E3E8EF;
  
    --shadow:    0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.04);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.10), 0 10px 10px -5px rgba(0,0,0,.04);
    --radius: 12px;
    --transition: all .25s ease;
  }
  
  /* === Overrides anti-violeta (Bootstrap/tema) === */
  :root{
    /* Primary del tema = azul navy del logo */
    --bs-primary:            var(--brand);
    --bs-primary-rgb:        11,46,92;
    --bs-link-color:         var(--brand);
    --bs-link-hover-color:   var(--brand-dark);
    --bs-link-color-rgb:     var(--bs-primary-rgb);
    --bs-focus-ring-color:   rgba(11,46,92,.25); /* quita el anillo violeta */
  }
  
  /* Links (por si tu tema no respeta las vars de arriba) */
  a, .link { color: var(--brand); }
  a:hover, .link:hover { color: var(--brand-dark); }
  a:visited { color: var(--brand); }        /* evita violeta del visited */
  a:active  { color: var(--brand-dark); }
  
  /* Botones rápidos */
  .btn-brand{ background:var(--brand); color:var(--white); border-color:var(--brand); }
  .btn-brand:hover{ background:var(--brand-dark); border-color:var(--brand-dark); }
  .btn-accent{ background:var(--accent); color:#0A1320; border-color:var(--accent); }
  .btn-accent:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
  
  /* Badges / resaltados dorados */
  .badge-accent{ background:var(--accent); color:#0A1320; }
  
  /* Títulos con acento dorado */
  .highlight-accent{ color: var(--accent); }
  
  /* Navbar brand para que no se “apague” en fondos oscuros */
  .navbar .brand-logo-circle,
  .navbar .brand-logo-nocrop{
    background:#fff; padding:4px; box-shadow:0 4px 12px rgba(0,0,0,.12);
    border-radius:50%; object-fit:contain; height:44px; width:44px;
  }

    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--ink);
      line-height: 1.6;
      overflow-x: hidden;
    }

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

    .navbar {
      padding: 1rem 0;
      background-color: rgba(255, 255, 255, 0.95) !important;
      backdrop-filter: blur(10px);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: var(--transition);
    }

    .navbar.scrolled {
      padding: 0.5rem 0;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }

    .navbar-brand {
      font-weight: 800;
      font-size: 1.5rem;
    }

    .navbar-brand b {
      color: var(--brand);
      background: linear-gradient(135deg, var(--brand), #7c3aed);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .nav-link {
      font-weight: 500;
      position: relative;
      padding: 0.5rem 1rem !important;
      transition: var(--transition);
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: var(--brand);
      transition: var(--transition);
      transform: translateX(-50%);
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      width: 80%;
    }

    .btn {
      border-radius: 8px;
      font-weight: 600;
      padding: 0.75rem 1.5rem;
      transition: var(--transition);
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--brand), #4f46e5);
      border: none;
      box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3);
    }

    .btn-outline-primary {
      border: 2px solid var(--brand);
      color: var(--brand);
    }

    .btn-outline-primary:hover {
      background-color: var(--brand);
      color: white;
      transform: translateY(-2px);
    }

    .section {
      padding: 5rem 0;
      position: relative;
    }

    .section-title {
      font-weight: 800;
      font-size: 2.5rem;
      margin-bottom: 1rem;
      background: linear-gradient(135deg, var(--ink), var(--brand));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .section-subtitle {
      color: var(--muted);
      font-size: 1.2rem;
      max-width: 600px;
      margin: 0 auto 3rem;
    }

    /* Hero Section */
    .hero {
      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
      padding: 8rem 0 5rem;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 100%;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(255,255,255,0.5)"/></svg>');
      background-size: cover;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--brand-light);
      color: var(--brand-dark);
      border-radius: 50px;
      padding: 0.5rem 1rem;
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 1.5rem;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
    }

    .hero h1 {
      font-size: 3.5rem;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 1.5rem;
    }

    .hero p.lead {
      font-size: 1.25rem;
      color: var(--muted);
      margin-bottom: 2rem;
    }

    .hero-features {
      list-style: none;
      padding: 0;
      margin: 0 0 2rem;
    }

    .hero-features li {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }

    .hero-features i {
      color: var(--brand);
      font-size: 1.2rem;
    }

    .hero-image {
      position: relative;
      z-index: 1;
    }

    .hero-image::before {
      content: '';
      position: absolute;
      top: -20px;
      left: -20px;
      right: 20px;
      bottom: 20px;
      background: linear-gradient(135deg, var(--brand), #7c3aed);
      border-radius: 20px;
      z-index: -1;
      transform: rotate(3deg);
    }

    .hero-image img {
      border-radius: 20px;
      box-shadow: var(--shadow-lg);
      transition: var(--transition);
    }

    .hero-image:hover img {
      transform: translateY(-5px);
    }

    /* Feature Cards */
    .feature-card {
      background: var(--white);
      border-radius: var(--radius);
      padding: 2rem;
      height: 100%;
      box-shadow: var(--shadow);
      transition: var(--transition);
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }

    .feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(to bottom, var(--brand), #7c3aed);
    }

    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
    }

    .feature-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, var(--brand-light), #e0e7ff);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
    }

    .feature-icon i {
      font-size: 1.5rem;
      col
/* ...cortado... */

Style #2

/* === MIORI 360 – Paleta basada en el logo (azul navy + dorado) === */
:root{
  /* Primario */
  --brand:        #0B2E5C;
  --brand-dark:   #072248;
  --brand-light:  #E8EFF8;

  /* Secundario/acento (dorado) */
  --accent:       #C69A2B;
  --accent-dark:  #9E7A1F;
  --accent-light: #F5E7C8;

  /* Texto/superficie */
  --ink:    #1B2430;
  --muted:  #657289;
  --bg:     #F7FAFC;
  --white:  #FFFFFF;
  --border: #E3E8EF;

  --shadow:    0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.04);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.10), 0 10px 10px -5px rgba(0,0,0,.04);
  --radius: 12px;
  --transition: all .25s ease;
}

/* === Overrides Bootstrap (evitar violeta y mostrar dorado) === */
:root{
  /* Primary => azul del logo */
  --bs-primary:            var(--brand);
  --bs-primary-rgb:        11,46,92;
  --bs-link-color:         var(--brand);
  --bs-link-hover-color:   var(--brand-dark);
  --bs-link-color-rgb:     var(--bs-primary-rgb);
  --bs-focus-ring-color:   rgba(11,46,92,.25);

  /* Warning => usamos el dorado del logo como acento visible */
  --bs-warning:            var(--accent);
  --bs-warning-rgb:        198,154,43;

  /* Optional secondary/info mapeados suaves */
  --bs-secondary:          var(--accent-dark);
  --bs-info:               var(--brand-light);
}

/* Links */
a, .link { color: var(--brand); }
a:hover, .link:hover { color: var(--brand-dark); }
a:visited { color: var(--brand); }
a:active  { color: var(--brand-dark); }

/* Botones y fondos principales */
.btn-primary, .bg-primary {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 6px rgba(11,46,92,.25);
}
.btn-primary:hover { filter: brightness(0.95); }

/* Botones/elementos dorados (usando warning como canal secundario) */
.btn-warning, .bg-warning {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #0A1320 !important;
}
.btn-outline-warning {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.btn-outline-warning:hover {
  background: var(--accent) !important;
  color: #0A1320 !important;
}

/* Utilidades */
.text-brand  { color: var(--brand) !important; }
.text-accent { color: var(--accent) !important; }
.bg-brand    { background: var(--brand) !important; color: var(--white) !important; }
.bg-accent   { background: var(--accent) !important; color: #0A1320 !important; }
.border-brand{ border-color: var(--brand) !important; }
.border-accent{ border-color: var(--accent) !important; }

/* Navlinks subrayado gradiente azul->dorado si existen */
.nav-link::after{
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

/* Títulos sección con gradiente azul->dorado si tienen esta clase */
.section-title, .title-gradient {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Navbar brand image: que NO se recorte */
.navbar-brand img{
  height:44px;
  width:auto;
  object-fit:contain;
  background:#fff;
  border-radius:10px;
  padding:2px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* Badges con dorado opcional (si el sitio usa .badge) */
.badge-warning, .badge-accent { background: var(--accent) !important; color:#0A1320 !important; }

/* Componentes con "violeta" heredado del tema – forzamos a brand/accent */
.text-primary { color: var(--brand) !important; }
.text-warning { color: var(--accent) !important; }
.alert-primary { background: color-mix(in srgb, var(--brand) 10%, white); border-color: var(--brand); color: var(--brand); }
.alert-warning { background: color-mix(in srgb, var(--accent) 18%, white); border-color: var(--accent); color: #4d3b0e; }

/* Opcionales para highlights en H1 si usan <em>/<strong> */
h1 em, h1 strong { color: var(--accent); font-style: normal; }

Style #3

/* Logo grande en todos los tamaños */
.navbar .navbar-brand img.brand-logo-nocrop,
.navbar .navbar-brand > img{
  height: clamp(60px, 7.5vw, 100px) !important; /* subí/bajá estos valores si querés */
  width: auto !important;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 3px;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  display: block;
}

/* Altura/respiración de la barra */
.navbar { padding-top: .35rem; padding-bottom: .35rem; }
@media (min-width: 992px){
  .navbar { padding-top: .5rem; padding-bottom: .5rem; }
}

/* Si tu navbar hace “shrink” al scrollear */
.navbar.scrolled .navbar-brand img.brand-logo-nocrop,
.navbar.scrolled .navbar-brand > img{
  height: clamp(48px, 6vw, 80px) !important;
}

Style #4

/* Centrado y proporción consistente */
.cases-section .case-slide{
  position: relative; display:block; width:100%;
  border:0; padding:0; background:transparent; cursor:pointer;
  border-radius:14px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
  max-width: 720px; /* evita tarjetas demasiado anchas en pantallas muy grandes */
}
.cases-section .case-slide:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}
.cases-section .case-slide img{
  width:100%;
  aspect-ratio: 4 / 3;   /* 4:3 queda armónico para “personas/eventos” */
  object-fit: cover;     /* recorte prolijo en grid */
  display:block;
}
.cases-section .case-overlay{
  position:absolute; inset:auto 0 0 0;
  padding:12px 14px; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color:#fff; pointer-events:none;
}

Style #5

/* Grid y tarjetas */
    .cases-section .case-slide{
      position: relative;
      display: block;
      width: 100%;
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 6px 16px rgba(0,0,0,.08);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .cases-section .case-slide:focus{ outline: 2px solid #0d6efd55; outline-offset: 2px; }
    .cases-section .case-slide:hover{
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(0,0,0,.12);
    }
    .cases-section .case-slide img{
      width: 100%;
      height: 0;
      /* Mostrarlas "según su contenido": recortadas con cover en la grilla */
      aspect-ratio: 1/1;       /* cuadrado; cambiá a 4/3 o 16/9 si preferís */
      height: auto;            /* por compatibilidad */
      object-fit: cover;
      display: block;
    }
    .cases-section .case-overlay{
      position: absolute;
      inset: auto 0 0 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 12px 14px;
      background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
      color: #fff;
      pointer-events: none;
    }
    .cases-section .case-overlay strong{ font-size: .95rem; line-height: 1.2; }
    .cases-section .case-overlay small{ opacity: .9; }
  
    /* Modal */
    .img-modal{
      position: fixed;
      inset: 0;
      display: none;
      z-index: 1050;
    }
    .img-modal[aria-hidden="false"]{ display: block; }
    .img-modal-backdrop{
      position: absolute; inset: 0; background: rgba(0,0,0,.72);
    }
    .img-modal-dialog{
      position: absolute;
      inset: 0;
      margin: auto;
      max-width: min(1100px, 92vw);
      max-height: min(90vh, 92vh);
      display: grid;
      grid-template-areas:
        "close close"
        "figure figure";
      align-items: center;
      justify-items: center;
      padding: 24px;
    }
    .img-modal-close{
      grid-area: close;
      align-self: start;
      justify-self: end;
      border: 0;
      width: 40px; height: 40px;
      border-radius: 50%;
      background: rgba(0,0,0,.55);
      color: #fff; font-size: 24px; line-height: 1;
      cursor: pointer;
    }
    .img-modal-figure{
      grid-area: figure;
      margin: 0;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-rows: 1fr auto;
      gap: 12px;
    }
    #imgModalImg{
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      display: block;
      border-radius: 12px;
      background: #111;
      /* En el modal se ve completa SIN recorte */
      object-fit: contain;
    }
    .img-modal-caption{
      color: #fff;
      text-align: left;
      width: 100%;
      padding: 0 4px;
    }
    .img-modal-title{ font-weight: 600; }
    .img-modal-desc{ opacity: .9; font-size: .95rem; }
  
    .img-modal-nav{
      position: absolute; top: 50%;
      transform: translateY(-50%);
      border: 0; width: 44px; height: 44px; border-radius: 50%;
      background: rgba(0,0,0,.55);
      color: #fff; font-size: 24px; cursor: pointer;
    }
    .img-modal-nav.prev{ left: 18px; }
    .img-modal-nav.next{ right: 18px; }
  
    @media (hover:hover){
      .img-modal-nav:hover, .img-modal-close:hover{
        background: rgba(0,0,0,.75);
      }
    }

rojasseguridadelectronica.com.ar

rojasseguridadelectronica.com.ar/index.html

Última modificación: 2025-09-22 16:47

CSS links: 4 style blocks: 6

Abrir MIX (extraer CSS) Factory (usar este estilo)

Si una página no carga en iframe por headers/X-Frame-Options, usá “Abrir”.

CSS externos detectados OK

https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css
https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap
https://unpkg.com/[email protected]/dist/aos.css

Bloques <style> inline detectados OK

Style #1

:root{
      --azul: #0f5bb5;
      --azul-2: #1b74e4;
      --azul-osc: #0b3f84;
      --azul-gradiente: linear-gradient(135deg, var(--azul) 0%, var(--azul-osc) 100%);
      --bg: #f5f7fb;
      --text: #0f172a;
      --muted: #64748b;
      --card: #ffffff;
      --shadow: 0 8px 24px rgba(15,91,181,.12);
      --shadow-hover: 0 12px 32px rgba(15,91,181,.18);
      --radius: 16px;
      --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    html{
      scroll-behavior:smooth;
      font-size: 16px;
    }
    
    body{
      font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:var(--text); 
      background:var(--bg);
      line-height: 1.6;
      overflow-x: hidden;
    }

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

    /* Navbar */
    .navbar{
      box-shadow: 0 2px 18px rgba(0,0,0,.06); 
      background:rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      transition: var(--transition);
      padding: 1rem 0;
    }
    
    .navbar.scrolled {
      padding: 0.5rem 0;
      box-shadow: 0 4px 20px rgba(0,0,0,.08);
    }
    
    .navbar-brand {
      font-weight: 800;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
    }
    
    .navbar-brand span {
      background: var(--azul-gradiente);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .navbar .nav-link{
      font-weight:600;
      position: relative;
      margin: 0 0.25rem;
      transition: var(--transition);
    }
    
    .navbar .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 0;
      background: var(--azul-gradiente);
      transition: var(--transition);
    }
    
    .navbar .nav-link:hover::after,
    .navbar .nav-link.active::after {
      width: 100%;
    }
    
    .btn-whats{
      background:#25d366;
      color:#fff;
      border:none;
      border-radius: 50px;
      padding: 0.5rem 1.25rem;
      font-weight: 600;
      transition: var(--transition);
      box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    }
    
    .btn-whats:hover{
      background:#1fb457;
      color:#fff;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
    }

    /* Hero */
    .hero{
      background: radial-gradient(1200px 600px at 80% -10%, rgba(27,116,228,.15), transparent 60%),
                  linear-gradient(180deg, #fff 0%, #f6f9ff 100%);
      padding: clamp(80px, 10vw, 160px) 0 clamp(60px, 8vw, 120px);
      position: relative;
      overflow: hidden;
    }
    
    .hero::before {
      content: '';
      position: absolute;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: rgba(27, 116, 228, 0.05);
      top: 10%;
      right: 10%;
      filter: blur(60px);
      z-index: 0;
    }
    
    .hero h1{
      font-weight:800; 
      letter-spacing:-.3px;
      font-size: clamp(2.5rem, 5vw, 4rem);
      margin-bottom: 1.5rem;
    }
    
    .hero .lead{
      color:var(--muted); 
      font-size: clamp(1rem, 2vw, 1.25rem);
      margin-bottom: 2rem;
    }
    
    .badge-pill{
      background:rgba(27,116,228,.12);
      color:var(--azul-2);
      border-radius:50px;
      padding:10px 16px;
      font-weight:700;
      font-size:.85rem;
      display: inline-flex;
      align-items: center;
      margin-bottom: 1.5rem;
    }
    
    .hero-figure{
      border-radius: 20px;
      overflow:hidden;
      box-shadow:var(--shadow);
      background:#0a0f1a;
      aspect-ratio: 4/3;
      display:flex; 
      align-items:center; 
      justify-content:center;
      position: relative;
      transition: var(--transition);
    }
    
    .hero-figure:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
    }
    
    .hero-figure img{
      width:100%; 
      height:100%; 
      object-fit:cover;
    }

    /* Secciones */
    .section{
      padding: clamp(80px, 10vw, 120px) 0;
      position: relative;
    }
    
    .section-title{
      font-weight:800; 
      letter-spacing:-.2px;
      font-size: clamp(2rem, 4vw, 3rem);
      margin-bottom: 1rem;
    }
    
    .subtle{
      color:var(--muted);
      font-size: 1.1rem;
    }

    .feature{
      background:var(--card);
      border-radius:var(--radius);
      padding:24px;
      box-shadow:var(--shadow);
      height:100%;
      transition: var(--transition);
      border: 1px solid rgba(255, 255, 255, 0.8);
    }
    
    .feature:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
    }
    
    .feature i{
      font-size:2rem; 
      color:var(--azul);
      margin-bottom: 1rem;
    }

    /* Cards de servicio */
    .service-card{
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:30px;
      height:100%;
      border:1px solid #e8eef9;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }
    
    .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--azul-gradiente);
      transform: scaleX(0);
      transform-origin: left;
      transition: var(--transition);
    }
    
    .service-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-hover);
    }
    
    .service-card:hover::before {
      transform: scaleX(1);
    }
    
    .service-card h3{
      font-size:1.25rem; 
      font-weight:800;
      margin-bottom: 1rem;
    }
    
    .pill{
      display:inline-block; 
      padding:8px 14px; 
      background:#eef5ff; 
      color:#195fbe; 
      border-radius:50px; 
      font-size:.85rem; 
      font-weight:700;
      margin-bottom: 1rem;
    }

    /* Por qué elegirnos (lista con check) */
    .check{
      display:flex; 
      gap:16px; 
      align-items:flex-start; 
      margin-bottom:20px;
      padding: 1rem;
      background: rgba(255, 255, 255, 0.7);
      border-radius: var(--radius);
      transition: var(--transition);
    }
    
    .check:hover {
      background: white;
      box-shadow: var(--shadow);
    }
    
    .check i{
      color:#10b981; 
      margin-top:3px;
      font-size: 1.25rem;
    }

    /* Ticker / Carrusel de trabajos */
    .ticker-wrap{
      position:relative;
    }
    
    .ticker-viewport{
      overflow:hidden;
      border-radius:var(--radius);
      background:var(--card);
      box-shadow:var(--shadow);
    }
    
    .ticker-track{
      display:flex;
      gap:16px;
      padding:16px;
      scroll-behavior:smooth;
      scroll-snap-type: x mandatory;
      overflow-x:auto;
      -webkit-overflow-scrolling: touch;
    }
    
    .slide{
      flex: 0 0 auto;
      width: 500px;
      height: 500px;
      max-width: 82vw;
      max-height: 82vw;
      border-radius:12px;
      overflow:hidden;
      scroll-snap-align:center;
      background:#0a0f1a;
      position:relative;
      transition: var(--transition);
    }
    
    .slide:hover {
      transform: scale(1.02);
    }
    
    .slide img{
      width:100%; 
      height:100%; 
      object-fit:cover;
      transition: var(--transition);
    }
    
    .slide:hover img {
      transform: scale(1.05);
    }
    
    .ticker-controls{
      display:flex; 
      gap:12px; 
      align-items:center; 
      justify-content:center;
      margin-top:24px;
    }
    
    .ticker-btn{
      width:50px; 
      height:50px; 
      
/* ...cortado... */

Style #2

/* === Fixes mobile overflow & hamburger visibility === */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
.navbar, .navbar * { max-width:100%; }
.navbar .navbar-toggler { margin-left:auto; }
.navbar-brand { 
  max-width: calc(100% - 56px); /* leave space for toggler */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
img, video, iframe { max-width:100%; height:auto; }
.row { margin-right: 0; margin-left: 0; } /* avoid accidental overflow on custom grids */
.container, .container-fluid { padding-right: 12px; padding-left: 12px; }
[class*="col-"] { padding-right: 12px; padding-left: 12px; }

/* Common culprits */
.ticker-wrap, .ticker-viewport, .ticker-track,
.carousel, .carousel-inner, .carousel-item,
.swiper, .swiper-wrapper, .swiper-slide {
  max-width:100vw; overflow:hidden;
}

/* Avoid fixed widths causing scroll on small screens */
*[style*="width:"]:not(canvas):not(svg) {
  /* If author set huge widths inline, let it shrink on mobile */
  max-width:100%;
}

/* Make offcanvas menus and dropdowns not push layout */
.offcanvas, .dropdown-menu { max-width:100vw; }

/* Prevent long links/text from overflowing */
a, p, h1, h2, h3, h4, h5, h6, span { word-break: break-word; }

Style #3

/* --- HERO: modo 'contain' para logos/imagenes con mucho texto --- */
.hero-figure.contain {
  background:#fff;                 /* fondo limpio para logos */
  aspect-ratio:auto;               /* liberamos la relación fija */
  min-height: clamp(220px, 32vw, 420px);
}

.hero-figure.contain img{
  width:100%;
  height:100%;
  object-fit: contain !important;  /* que entre completa */
  padding: clamp(12px,2.5vw,28px); /* margen respirable alrededor */
}

/* En general, subimos el límite de alto del hero para que no aplaste el contenedor */
@media (min-width: 992px){
  .hero-col-img .hero-figure{ max-height: 520px; }
}

/* Mobile: texto primero, sin animación y alto controlado */
@media (max-width: 991.98px){
  .floating{ animation: none !important; }          /* sacamos vaivén en phone */
  .hero-figure{ max-height: 360px; margin-top: 8px;}/* evita que tape la navbar */
  .hero-figure.contain img{ padding: 16px; }
}

/* Accesibilidad: si el usuario prefiere menos movimiento, apagamos animación */
@media (prefers-reduced-motion: reduce){
  .floating{ animation: none !important; }
}

Style #4

/* Limitar tamaño y centrar la imagen de "Quiénes somos" */
    .about-figure{
      width: clamp(280px, 85%, 560px);   /* evita que quede demasiado ancha */
      margin-inline: auto;               /* centrado simétrico */
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      background:#0a0f1a;
      aspect-ratio: 16/9;                /* proporción agradable */
    }
    .about-figure img{
      width: 100%;
      height: 100%;
      object-fit: cover;                  /* cambiá a contain si es logo */
      image-rendering: auto;
    }
    @media (min-width: 1200px){
      .about-figure{ width: min(520px, 80%); }
    }
    @media (max-width: 991.98px){
      .about-figure{
        width: 92%;
        aspect-ratio: 3/2;
      }
    }
    /* Si usás un logo con texto, podés sumar la clase "contain" al figure */
    .about-figure.contain img{ object-fit: contain; background:#fff; padding:14px; }

Style #5

/* Miniaturas: ver según contenido (sin recorte) */
    #trabajos .slide{
      flex: 0 0 auto;
      width: 500px; height: 500px;
      max-width: 82vw; max-height: 82vw;
      border-radius:12px; overflow:hidden;
      background:#000; display:flex; align-items:center; justify-content:center;
      cursor: zoom-in; transition: transform .25s ease;
    }
    #trabajos .slide:hover{ transform: scale(1.02); }
    #trabajos .slide img{
      width:100%; height:100%;
      object-fit: contain;          /* <<< sin recorte, respeta contenido */
      background:#000;
    }
  
    /* Modal de imagen */
    .img-modal{
      position: fixed; inset: 0; display: none;
      align-items: center; justify-content: center;
      background: rgba(0,0,0,.85);
      z-index: 1080;
    }
    .img-modal.is-open{ display: flex; }
    .img-modal__viewport{
      width: min(92vw, 1400px); height: min(92vh, 90vh);
      display:flex; align-items:center; justify-content:center;
      border-radius:12px; overflow:hidden; background:#000;
      box-shadow: 0 20px 50px rgba(0,0,0,.5);
    }
    .img-modal__viewport img{ max-width:100%; max-height:100%; object-fit: contain; }
  
    .img-modal__close, .img-modal__nav{
      position:absolute; border:none; outline:none;
      background: rgba(255,255,255,.12); color:#fff;
      width:44px; height:44px; border-radius:999px;
      display:flex; align-items:center; justify-content:center;
      backdrop-filter: blur(6px); transition: background .2s, transform .2s;
    }
    .img-modal__close{ top:18px; right:18px; z-index:2; }
    .img-modal__prev{ left:16px; }
    .img-modal__next{ right:16px; }
    .img-modal__nav:hover, .img-modal__close:hover{ background: rgba(255,255,255,.22); transform: translateY(-1px); }
  
    @media (max-width: 575.98px){
      .img-modal__nav{ width:40px; height:40px; }
    }

Style #6

.wa-float{
    position: fixed;
    right: 18px; bottom: 18px;
    width: 58px; height: 58px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #25D366; color: #fff; text-decoration: none;
    box-shadow: 0 12px 30px rgba(37,211,102,.45), 0 4px 12px rgba(0,0,0,.15);
    z-index: 1100;
    transition: transform .2s ease, box-shadow .25s ease, background .2s ease;
    overflow: visible;
  }
  .wa-float:hover{
    transform: translateY(-2px);
    background: #1fb457;
    box-shadow: 0 16px 36px rgba(37,211,102,.55), 0 6px 16px rgba(0,0,0,.18);
  }
  .wa-float:active{ transform: translateY(0); }

  .wa-float i{
    font-size: 1.7rem;
    line-height: 1;
  }

  /* Badge (texto) que aparece al pasar el mouse en desktop */
  .wa-badge{
    position: absolute;
    right: 70px;
    white-space: nowrap;
    background: #0b1930; color: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    opacity: 0; transform: translateX(10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .wa-float:hover .wa-badge{
    opacity: 1; transform: translateX(0);
  }

  /* Pulso */
  .wa-pulse{
    position: absolute; inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37,211,102,.45);
    animation: waPulse 2s infinite;
  }
  @keyframes waPulse{
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
    70%  { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }

  /* Evitar que tape el contenido muy cerca del borde en pantallas chicas */
  @media (max-width: 575.98px){
    .wa-float{ right: 14px; bottom: 14px; width: 54px; height: 54px; }
    .wa-float i{ font-size: 1.6rem; }
    .wa-badge{ display: none; } /* en móvil no mostramos el badge */
  }

  /* Respeta Preferencias de movimiento reducido */
  @media (prefers-reduced-motion: reduce){
    .wa-float, .wa-badge{ transition: none; }
    .wa-pulse{ animation: none; }
  }

servitecc.com.ar

servitecc.com.ar/index.html

Última modificación: 2025-09-22 15:18

CSS links: 5 style blocks: 6

Abrir MIX (extraer CSS) Factory (usar este estilo)

Si una página no carga en iframe por headers/X-Frame-Options, usá “Abrir”.

CSS externos detectados OK

https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css
https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap
https://unpkg.com/[email protected]/dist/aos.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css

Bloques <style> inline detectados OK

Style #1

:root {
      --primary: #0a56c2;
      --primary-dark: #0845a0;
      --secondary: #e10600;
      --accent: #ff6b35;
      --dark: #0f172a;
      --light: #f8fafc;
      --gray: #64748b;
      --gray-light: #e2e8f0;
      --success: #10b981;
      --card-bg: #ffffff;
      --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
      --gradient-light: linear-gradient(135deg, rgba(10,86,194,0.05) 0%, rgba(225,6,0,0.05) 100%);
      --shadow: 0 10px 30px rgba(0,0,0,0.08);
      --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
      --radius: 16px;
      --radius-lg: 24px;
    }

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

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body {
      font-family: 'Poppins', sans-serif;
      color: var(--dark);
      background-color: var(--light);
      line-height: 1.6;
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 1rem;
    }

    .container {
      max-width: 1200px;
    }

    /* ====== Navbar ====== */
    .navbar {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      padding: 1rem 0;
      transition: all 0.3s ease;
    }

    .navbar.scrolled {
      padding: 0.5rem 0;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .navbar-brand {
      font-weight: 900;
      font-size: 1.8rem;
      color: var(--primary);
      display: flex;
      align-items: center;
    }

    .navbar-brand b {
      color: var(--secondary);
    }

    .navbar-brand .logo-icon {
      background: var(--gradient);
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      color: white;
    }

    .nav-link {
      font-weight: 500;
      color: var(--dark);
      position: relative;
      padding: 0.5rem 1rem !important;
      transition: color 0.3s ease;
    }

    .nav-link:hover {
      color: var(--primary);
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: var(--gradient);
      transition: all 0.3s ease;
      transform: translateX(-50%);
    }

    .nav-link:hover::after {
      width: 70%;
    }

    .btn-wa {
      background: #25D366;
      color: white;
      border-radius: 50px;
      padding: 0.6rem 1.2rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    }

    .btn-wa:hover {
      background: #1da851;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    }

    /* ====== Hero ====== */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      color: white;
      background: linear-gradient(135deg, rgba(10,86,194,0.85) 0%, rgba(225,6,0,0.8) 100%), url('img/hero-electronica.jpg') center/cover no-repeat;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      z-index: 0;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      padding: 4rem 0;
    }

    .hero h1 {
      font-weight: 900;
      line-height: 1.1;
      font-size: clamp(2.5rem, 5vw, 4rem);
      margin-bottom: 1.5rem;
    }

    .hero .lead {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      opacity: 0.9;
      max-width: 600px;
    }

    .hero-badge {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      border-radius: 50px;
      padding: 0.5rem 1.2rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 2rem;
    }

    .hero-badge i {
      color: #ffd700;
    }

    .hero-btns {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 2rem;
    }

    .btn-primary-custom {
      background: white;
      color: var(--primary);
      border: none;
      border-radius: 50px;
      padding: 0.8rem 1.8rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
    }

    .btn-primary-custom:hover {
      background: var(--light);
      color: var(--primary-dark);
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4);
    }

    .btn-secondary-custom {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 50px;
      padding: 0.8rem 1.8rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.3s ease;
    }

    .btn-secondary-custom:hover {
      background: rgba(255, 255, 255, 0.3);
      color: white;
      transform: translateY(-3px);
    }

    .hero-info {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9rem;
      opacity: 0.9;
    }

    /* ===== Sections ===== */
    .section {
      padding: 6rem 0;
    }

    .section-title {
      font-weight: 800;
      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);
      border-radius: 2px;
    }

    .section-sub {
      color: var(--gray);
      font-size: 1.1rem;
      max-width: 700px;
      margin-bottom: 3rem;
    }

    /* ===== Cards ===== */
    .card-custom {
      background: var(--card-bg);
      border: none;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      transition: all 0.3s ease;
      height: 100%;
      overflow: hidden;
    }

    .card-custom:hover {
      transform: translateY(-10px);
      box-shadow: var(--shadow-lg);
    }

    .icon-badge {
      width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      background: var(--gradient-light);
      color: var(--primary);
      font-size: 1.8rem;
      margin-bottom: 1.5rem;
    }

    /* ===== Ticker / Carrusel ===== */
    .ticker-section {
      background: var(--gradient-light);
      position: relative;
      overflow: hidden;
    }

    .ticker-section::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.3
/* ...cortado... */

Style #2

/* === Mobile-first hero order & overflow fix === */
.hero .col-text { order: 1; }
.hero .col-img  { order: 2; }
.hero .col-img img { max-width: 100%; height: auto; display: block; }
@media (min-width: 992px) {
  .hero .col-text { order: 1; } /* keep text first or adjust to 1/2 as needed */
  .hero .col-img  { order: 2; }
}
html, body { overflow-x: hidden; }

Style #3

/* === Mobile navbar overlap fix === */
@media (max-width: 991.98px) {
  header.hero { padding-top: 96px; } /* fallback for fixed/top navbars */
}

Style #4

.logo-img{
  height: 32px;        /* probá 28–40px según tu navbar */
  width: auto;
  display: block;
}

Style #5

/* Hero con imagen derecha */
.hero { position: relative; overflow: hidden; }
.hero-figure {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  padding: 10px;
}
.hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* Detalle decorativo sutil detrás de la imagen */
.hero-figure::after {
  content: "";
  position: absolute;
  inset: -12% -8% auto auto;
  height: 60%;
  width: 60%;
  background: radial-gradient(closest-side, rgba(255,193,7,.25), transparent 65%);
  filter: blur(12px);
  z-index: -1;
}

/* Ajustes para títulos grandes que ya tengas */
.hero h1 { line-height: 1.15; }

/* Responsivo */
@media (max-width: 991.98px){
  .hero-figure { max-width: 420px; }
}
@media (max-width: 575.98px){
  .hero-figure { max-width: 100%; padding: 8px; }
}

Style #6

.floating-actions{
    position:fixed; right:20px; bottom:20px; z-index:9999;
    display:flex; flex-direction:column; gap:12px;
  }
  .fab{
    --size:56px;
    width:var(--size); height:var(--size);
    border-radius:999px; display:flex; align-items:center; justify-content:center;
    color:#fff; text-decoration:none; box-shadow:0 12px 28px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
    position:relative; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    font-size:24px; /* Tamaño del icono */
  }
  .fab:focus{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.6), 0 12px 28px rgba(0,0,0,.22)}
  .fab:hover{ transform: translateY(-2px); filter: brightness(1.05) }
  .fab:active{ transform: translateY(0) scale(.98) }

  .fab-wa{ background:#25D366; animation:pulse 2.2s infinite; }
  .fab-fb{ background:#1877F2; }
  .fab-ig{
    background: radial-gradient(30% 30% at 30% 110%, #FED373 0%, transparent 60%),
                radial-gradient(40% 40% at 0% 0%, #FCAF45 0%, transparent 60%),
                radial-gradient(60% 60% at 100% 0%, #F56040 0%, transparent 70%),
                linear-gradient(45deg, #833AB4, #C13584 60%, #E1306C);
  }

  .fab-label{
    position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%);
    background:rgba(17,17,17,.92); color:#fff; padding:6px 10px; border-radius:10px;
    font-size:.85rem; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
    box-shadow:0 6px 16px rgba(0,0,0,.25);
    backdrop-filter: blur(4px);
  }
  .fab:hover .fab-label, .fab:focus .fab-label{
    opacity:1; transform:translate(-2px,-50%);
  }

  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(37,211,102,.45) }
    70%{ box-shadow:0 0 0 14px rgba(37,211,102,0) }
    100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) }
  }

  /* Mobile */
  @media (max-width: 575.98px){
    .floating-actions{ right:14px; bottom:14px; gap:10px; }
    .fab{ --size:52px; font-size:22px; }
    .fab-label{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    .fab, .fab *{ animation:none !important; transition:none !important; }
  }