Álbum de páginas (nodo25)

estudiocornagliayasociados.com

estudiocornagliayasociados.com/index.html

Última modificación: 2025-12-09 00:47

CSS links: 4 style blocks: 12

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://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;500&display=swap
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css

Bloques <style> inline detectados OK

Style #1

/* === Tipografías iguales al sitio WP === */
:root{
  --font-head: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* texto general */
body{
  font-family: var(--font-body) !important;
  font-weight: 400;
}

/* títulos y marcas */
h1,h2,h3,h4,h5,h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6,
.navbar .navbar-brand,.footer-brand{
  font-family: var(--font-head) !important;
  font-weight: 800; /* bajá a 700 si lo ves muy grueso */
}

/* menús/cta (si querés look más firme) */
.navbar .nav-link,.btn,.btn-brand{
  font-family: var(--font-head) !important;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none; /* poné uppercase si querés */
}

    :root {
      --brand: #0a3643;
      --brand-light: #1a4e60;
      --accent: #c9a467;
      --accent-dark: #a88446;
      --dark: #0f172a;
      --muted: #6b7280;
      --light: #f8f9fa;
      --lighter: #f1f5f9;
      --white: #ffffff;
      --shadow: 0 10px 30px rgba(10, 54, 67, 0.12);
      --shadow-hover: 0 20px 40px rgba(10, 54, 67, 0.18);
      --radius: 16px;
      --radius-lg: 24px;
      --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      color: #374151;
      line-height: 1.7;
      overflow-x: hidden;
      background: var(--white);
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Playfair Display', Georgia, serif;
      color: var(--dark);
      letter-spacing: -0.01em;
      font-weight: 700;
    }

    .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 800;
    }

    /* NAVBAR */
    .navbar {
      padding: 1rem 0;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1030;
      transition: var(--transition);
      background: transparent;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .navbar.scrolled {
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 4px 20px rgba(10, 54, 67, 0.1);
      padding: 0.6rem 0;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .navbar .navbar-brand {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 800;
      font-size: 1.5rem;
      color: var(--brand);
      display: flex;
      align-items: center;
    }

    .navbar .navbar-brand::before {
      content: "";
      margin-right: 8px;
      font-size: 1.8rem;
    }

    .navbar .nav-link {
      color: var(--dark);
      font-weight: 500;
      margin: 0 0.5rem;
      position: relative;
      padding: 0.5rem 0.8rem !important;
      transition: var(--transition);
    }

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

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

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

    .navbar .btn-brand {
      background: var(--brand);
      color: var(--white);
      border: none;
      border-radius: 10px;
      padding: 0.6rem 1.2rem;
      font-weight: 600;
      transition: var(--transition);
      box-shadow: 0 4px 12px rgba(10, 54, 67, 0.2);
    }

    .navbar .btn-brand:hover {
      background: var(--brand-light);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(10, 54, 67, 0.3);
    }

    .navbar-toggler {
      border: none;
      padding: 0.5rem;
      font-size: 1.5rem;
      color: var(--brand);
    }

    .navbar-toggler:focus {
      box-shadow: none;
    }

    @media (max-width: 991.98px) {
      .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        padding: 1rem;
        border-radius: var(--radius);
        margin-top: 1rem;
        box-shadow: var(--shadow);
      }

      .navbar .nav-link {
        margin: 0.3rem 0;
        padding: 0.8rem 1rem !important;
        border-radius: 8px;
      }

      .navbar .nav-link:hover {
        background: rgba(10, 54, 67, 0.05);
      }
    }

    .hero {
      min-height: 100vh;
      background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
                  url('https://nodo25.netfan.com.ar/estudiocornagliayasociados.com/img/hero.png')
                  center/cover no-repeat;
      display: flex;
      align-items: center;
      position: relative;
      padding-top: 76px;
      color: var(--white);
      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='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
      opacity: 0.4;
    }

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

    .hero h1 {
      font-size: 3.5rem;
      font-weight: 800;
      margin-bottom: 1.5rem;
      line-height: 1.2;
      color: var(--white);
    }

    .hero .lead {
      font-size: 1.25rem;
      margin-bottom: 2rem;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 400;
    }

    .highlight {
      background: linear-gradient(120deg, rgba(201, 164, 103, 0.3) 0%, rgba(201, 164, 103, 0.1) 100%);
      padding: 0.1rem 0.4rem;
      border-radius: 6px;
      border-left: 3px solid var(--accent);
    }

    .btn-brand {
      background: var(--accent);
      color: var(--dark);
      border: none;
      border-radius: 10px;
      padding: 1rem 2rem;
      font-weight: 600;
      transition: var(--transition);
      box-shadow: 0 10px 25px rgba(201, 164, 103, 0.3);
    }

    .btn-brand:hover {
      background: var(--accent-dark);
      color: var(--white);
      transform: translateY(-3px);
      box-shadow: 0 15px 35px rgba(201, 164, 103, 0.4);
    }

    .btn-outline-light {
      border: 2px solid rgba(255, 255, 255, 0.8);
      color: var(--white);
      border-radius: 10px;
      padding: 1rem 2rem;
      font-weight: 600;
      transition: var(--transition);
    }

    .btn-out
/* ...cortado... */

Style #2

.carousel-indicators{display:none!important;}

Style #3

/* Fondo negro y textos blancos */
  .navbar.bg-black { background:#000 !important; }
  .navbar-dark .navbar-nav .nav-link { color:#fff; opacity:.9; }
  .navbar-dark .navbar-nav .nav-link:hover,
  .navbar-dark .navbar-nav .nav-link:focus { color:#fff; opacity:1; }
  
  /* Toggler con líneas blancas (usa el SVG de Bootstrap) */
  .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  .navbar-toggler { border-color: rgba(255,255,255,.4); }
  .navbar-toggler:focus { box-shadow: 0 0 0 .1rem rgba(255,255,255,.4); }
  
  /* Menú desplegado en mobile con fondo negro */
  @media (max-width: 991.98px) {
    .navbar .navbar-collapse {
      background:#000;
      padding: .75rem 1rem;
      border-radius: .5rem;
      margin-top:.5rem;
    }
  }
  
  /* Botón WhatsApp con contraste sobre negro (ajustá a tu paleta) */
  .btn-brand {
    background:#25D366;
    color:#000;
    border:0;
  }
  .btn-brand:hover { filter: brightness(0.9); color:#000; }

Style #4

/* === HERO + STICKER (consolidado) === */

/* Reservo espacio para el sticker y evito 100vh duro en mobile */
.hero{
  --sticker-h: clamp(200px, 26vw, 360px); /* alto del carrusel “pegatina” */
  padding-top: 84px;                      /* bajo navbar fija */
  padding-bottom: calc(var(--sticker-h) + 28px); /* espacio para el sticker */
  min-height: 85vh;                       /* más amable que 100vh en phone */
  position: relative;
  overflow: visible;
}
.hero .hero-content{ margin-top: 0; }
@media (min-width: 992px){
  .hero .hero-content{ transform: translateY(-16px); } /* un leve lift en desktop */
}

/* Sticker pegado al borde inferior del hero */
.hero-sticker{
  --sticker-overlap: 0px;   /* si querés que “cuelgue”: -12px */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--sticker-overlap);
  z-index: 5;

  width: 100%;              /* ancho real del hero (no 100vw) */
  max-width: 1700px;        /* límite opcional en pantallas enormes */
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  border-radius: 0;
}

/* Grilla multi-item: 3 desktop / 2 tablet / 1 phone */
.sticker-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0; padding: 0;
}
.sticker-tile{
  height: var(--sticker-h);
  overflow: hidden;
}
.sticker-img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; user-select: none; -webkit-user-drag: none;
}

/* Controles del carrusel */
.hero-sticker .carousel-indicators{ margin-bottom: .6rem; }
.hero-sticker .carousel-indicators [data-bs-target]{
  width:10px;height:10px;border-radius:50%;
  background: rgba(255,255,255,.85);
}
.hero-sticker .carousel-indicators .active{ background:#c9a467; }
.hero-sticker .carousel-control-prev-icon,
.hero-sticker .carousel-control-next-icon{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

/* Responsive */
@media (max-width: 992px){
  .sticker-grid{ grid-template-columns: repeat(2, 1fr); }
  .sticker-grid .sticker-tile:nth-child(3){ display:none; } /* muestra 2 por slide */
}
@media (max-width: 576px){
  .sticker-grid{ grid-template-columns: 1fr; }
  .sticker-grid .sticker-tile:nth-child(n+2){ display:none; } /* 1 por slide */
  .hero{ padding-top: 72px; } /* un toque menos bajo la navbar en phone */
}

Style #5

/* === ESPECIALIDADES === */
  .especialidades{ padding-top:4.5rem; padding-bottom:4.5rem; }

  .especialidades .eyebrow{
    letter-spacing:.18em; font-weight:700; color:#6b7280; font-size:.9rem; display:block; margin-bottom:.5rem;
  }
  .especialidades .title-accent{
    width:90px; height:4px; background:var(--accent); border-radius:2px;
  }
  .especialidades .link-more{
    display:inline-flex; align-items:center; gap:.25rem; font-weight:600; text-decoration:none;
    color:var(--dark); border-bottom:2px solid transparent; transition:var(--transition);
  }
  .especialidades .link-more:hover{ color:var(--brand); border-color:var(--accent); }

  /* Icon-box (mismo look dorado que “Áreas”) */
  .icon-box{
    display:flex; gap:14px; align-items:flex-start;
    padding:.25rem 0 1.25rem 0; border-bottom:1px solid #eef2f7;
  }
  @media (min-width:768px){ .icon-box:nth-child(n+3){ border-bottom:0; } }

  .icon-badge{
    width:58px; height:58px; border-radius:16px; flex:0 0 58px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg, rgba(201,164,103,.18), rgba(201,164,103,.12));
    color:#a88446;
    box-shadow: inset 0 0 0 1px rgba(201,164,103,.28), 0 6px 14px rgba(10,54,67,.08);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .icon-badge i{ font-size:24px; line-height:1; }
  .icon-box:hover .icon-badge{
    transform: translateY(-2px) scale(1.06);
    background:linear-gradient(180deg, rgba(201,164,103,.22), rgba(201,164,103,.14));
    box-shadow: inset 0 0 0 1px rgba(201,164,103,.34), 0 10px 22px rgba(10,54,67,.12);
  }

  .icon-box-content h3{ color:var(--dark); margin-top:2px; }
  .icon-box-content p{ color:#4b5563; }

Style #6

/* ==== VIDEOS GRID ==== */
.videos-section{ padding-top:4rem; padding-bottom:4rem; }

.videos-title h2{ color: var(--dark); }
.videos-accent{
  width:90px; height:4px; background:var(--accent);
  border-radius:3px; display:inline-block; margin-top:.25rem;
}

/* Grid responsive */
.video-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 991.98px){
  .video-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px){
  .video-grid{ grid-template-columns: 1fr; gap:18px; }
}

/* Card + embed 16:9 */
.video-card{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.video-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); }

.video-embed{
  aspect-ratio: 16/9;
  position: relative; width:100%; background:#000;
}
.video-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

/* Copy debajo del grid */
.videos-copy .videos-subtitle{
  font-weight:800; color: var(--dark);
  margin-bottom:.5rem; letter-spacing:-.01em;
}
.videos-copy p{ line-height:1.75; }

/* Ajustes del CTA (usa tu .btn-brand existente) */
.videos-copy .btn.btn-brand{
  padding:.85rem 1.6rem; font-weight:700; border-radius:10px;
}

Style #7

/* ===== Nosotros: imagen redondeada y más chica, sin marco ===== */
.brand-pic{
               /* tamaño más chico en desktop */
  margin-inline: auto;          /* centra en mobile y tablet */
}

.brand-image{
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: initial;

            /* mantiene cuadrada */
  
  object-position: center;
  border-radius: 26px;          /* redondeado */
  box-shadow: 0 10px 24px rgba(0,0,0,.12); /* sombra suave (podés quitarla) */
  background: transparent;             /* de fondo por si el logo es png con transparencias */
  display: block;
}

/* pisa cualquier estilo viejo del marco gris */
.brand-frame, .brand-frame::before, .brand-frame::after{
  all: unset !important;
}

/* responsive: un toque más chica en mobile */
@media (max-width: 575.98px){
  .brand-pic{ max-width: 280px; }
  .brand-image{ border-radius: 22px; }
}

  /* ===== NOSOTROS ===== */
.about-hero{ padding-top:4.5rem; padding-bottom:4.5rem; }

.about-eyebrow{
  letter-spacing:.18em; font-weight:700; color:#6b7280; font-size:.9rem; display:block; margin-bottom:.25rem;
}

.about-accent{
  width:90px; height:4px; background:var(--accent);
  border-radius:3px;
}

.about-link{
  display:inline-flex; align-items:center; gap:.25rem;
  font-weight:700; color:var(--dark); text-decoration:none; border-bottom:2px solid transparent;
  transition: var(--transition);
}
.about-link:hover{ color:var(--brand); border-color:var(--accent); }

/* Tarjeta del logo (cuadrado 1:1 con marco suave) */
.brand-frame{
  border-radius:28px;
  border:8px solid transparent;
  background:
    linear-gradient(#0b0b0b, #0b0b0b) padding-box,                        /* fondo negro dentro */
    linear-gradient(145deg,#d8dde3,#b8c0c9) border-box;                   /* “marco” claro */
  box-shadow:
    0 12px 28px rgba(10,54,67,.08),
    0 22px 48px rgba(10,54,67,.06);
  padding:18px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.brand-frame:hover{
  transform: translateY(-4px);
  box-shadow:
    0 16px 36px rgba(10,54,67,.12),
    0 28px 60px rgba(10,54,67,.10);
}

.brand-image{
  width:100%; aspect-ratio:1/1; display:block;
  object-fit:cover; object-position:center;
  border-radius:20px;
  /* si tu logo es PNG con fondo transparente y querés “contain”:
     object-fit: contain; background:#0b0b0b; padding:16px; */
}

/* Responsive */
@media (max-width: 991.98px){
  .about-hero{ text-align:left; }
  .brand-frame{ max-width:520px; margin-inline:auto; }
}
@media (max-width: 575.98px){
  .about-hero{ padding-top:3.5rem; padding-bottom:3.5rem; }
  .brand-frame{ padding:14px; border-radius:24px; }
}

Style #8

/* === FIX brand image: wider, no crop, no background === */
.about-hero .brand-pic{ max-width: 640px; margin-inline: auto; }
.about-hero .brand-image{
  width:100%; height:auto; aspect-ratio:auto; object-fit:initial;
  background: transparent; padding: 0;
}

Style #9

/* ===== TESTIMONIOS ===== */
.testi-section{ padding-top:4.5rem; padding-bottom:4.5rem; }

.testi-eyebrow{
  display:inline-block; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; font-size:.9rem; color:#6b7280; margin-bottom:.25rem;
}

.testi-accent{
  width:90px; height:4px; background:var(--accent);
  border-radius:3px; display:inline-block;
}

/* Card */
.testi-card{
  background:#fff; border-radius:14px; padding:1.6rem 1.8rem 1.4rem;
  box-shadow: 0 10px 24px rgba(10,54,67,.08);
  position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.testi-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.testi-card p{ color:#4b5563; line-height:1.75; }

/* Comillas grandes decorativas */
.testi-quote{
  font-family: Georgia, 'Times New Roman', serif;
  font-size:40px; line-height:1; color:var(--accent); margin-bottom:.25rem;
  user-select:none;
}

@media (max-width: 575.98px){
  .testi-card{ padding:1.4rem 1.4rem 1.2rem; }
  .testi-quote{ font-size:36px; }
}

Style #10

.eyebrow{letter-spacing:.2em;font-size:.8rem;text-transform:uppercase;opacity:.7}
  .section-title{font-weight:800}
  .title-underline{width:70px;height:3px;background:#c69c5e;border-radius:2px;margin-top:.5rem}
  .blog-card{border:0;border-radius:14px;overflow:hidden;transition:transform .2s, box-shadow .2s}
  .blog-card:hover{transform:translateY(-4px);box-shadow:0 .8rem 2rem rgba(0,0,0,.12)}
  .object-fit-cover{object-fit:cover}

  .modal-content{border:0;border-radius:16px;overflow:hidden}
  .modal-img-wrap{width:100%;height:280px;overflow:hidden}
  .modal-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}

  /* Asegura que el footer del modal pueda alinear a la izquierda sin conflictos */
  .modal-footer{gap:.5rem}

Style #11

/* ===== CTA previa al footer ===== */
  .footer-cta{
  position: relative;
  isolation: isolate;
  color: #fff;
  padding: 68px 0 84px;            /* altura como la ref */
  text-align: center;
  }
  .footer-cta__title{
  font-weight: 800;
  letter-spacing: -0.01em;
  }
  .footer-cta__sub{ opacity: .9; }
  .btn-accent{
  background: var(--accent);
  color: #1c1c1c;
  border: 0;
  padding: .9rem 1.6rem;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(201,164,103,.25);
  }
  .btn-accent:hover{
  background: var(--accent-dark);
  color:#fff;
  transform: translateY(-2px);
  }

  /* fondo con imagen oscurecida */
  .footer-cta__bg{
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.65)),
    url('https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  z-index: -1;
  }

  /* ===== Footer oscuro ===== */
  .site-footer{
  background: #0b0f14;           /* negro profundo */
  color: rgba(255,255,255,.85);
  padding: 38px 0 28px;
  border-top: 1px solid rgba(255,255,255,.06);
  }
  .footer-head{
  font-weight: 800;
  color:#fff;
  margin-bottom: 14px;
  }
  .footer-list{
  list-style: none; padding: 0; margin: 0;
  }
  .footer-list li{
  display: flex; gap:.6rem; align-items: center;
  margin: .55rem 0;
  }
  .footer-list i{
  color: var(--accent);
  font-size: 1.05rem;
  width: 1.2rem; text-align: center; flex: 0 0 auto;
  }
  .footer-list a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color .2s ease;
  }
  .footer-list a:hover{ color:#fff; }

  /* copy */
  .footer-copy{
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 26px;
  padding-top: 18px;
  }

  @media (max-width: 991.98px){
  .footer-cta{ padding: 56px 0 72px; }
  }
  @media (max-width: 575.98px){
  .footer-cta__title{ font-size: 1.8rem; }
  }
  /* === Fix colores en la banda CTA === */
  .footer-cta,
  .footer-cta h1,
  .footer-cta h2,
  .footer-cta .footer-cta__title,
  .footer-cta p,
  .footer-cta a:not(.btn) {
  color: #fff !important;     /* texto blanco sí o sí */
  }

  /* Opcional: un leve halo para legibilidad sobre la foto */
  .footer-cta h1,
  .footer-cta h2,
  .footer-cta p {
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  }

  /* Si querés que el botón también sea blanco con borde */
  .footer-cta .btn-accent {
  background: var(--accent);
  color: #111 !important;       /* dejalo oscuro si usás fondo dorado */
  }

Style #12

/* Instagram FLOAT (independiente del WhatsApp) */
    .ig-float{
      position:fixed;
      right:25px;
      bottom:100px;            /* queda arriba del WhatsApp (que está en 25px) */
      z-index:1060;
      width:65px; height:65px;
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      background:#E4405F;      /* color IG */
      color:#fff;
      font-size:28px;
      box-shadow:0 15px 30px rgba(228,64,95,.35);
      transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
      animation: ig-pulse 2s infinite;
    }
    .ig-float:hover{
      transform:scale(1.1) rotate(5deg);
      box-shadow:0 20px 40px rgba(228,64,95,.45);
      text-decoration:none;
      color:#fff;
    }
    @keyframes ig-pulse{
      0%   { box-shadow:0 0 0 0 rgba(228,64,95,.6); }
      70%  { box-shadow:0 0 0 12px rgba(228,64,95,0); }
      100% { box-shadow:0 0 0 0 rgba(228,64,95,0); }
    }
    /* Evitar superposición en pantallas muy chicas */
    @media (max-width: 420px){
      .ig-float{ bottom:95px; right:20px; width:58px; height:58px; font-size:26px; }
    }
    /* Respeta accesibilidad si el usuario reduce animaciones */
    @media (prefers-reduced-motion: reduce){
      .ig-float{ animation:none; }
    }

modospapinamar.com.ar

modospapinamar.com.ar/index.html

Última modificación: 2025-12-02 19:48

CSS links: 4 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://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
https://unpkg.com/aos@next/dist/aos.css

Bloques <style> inline detectados OK

Style #1

:root {
        --primary-color: #5ac1a2;
        --primary-dark: #3a9d80;
        --primary-light: #8ad6c1;
        --secondary-color: #f6f9f8;
        --dark-color: #1a2e35;
        --light-color: #ffffff;
        --accent-color: #ff7e5f;
        --text-color: #333333;
        --text-light: #777777;
        --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, #ff9a5f 100%);
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
        --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      }

      @font-face {
        font-family: 'Montserrat';
        src: url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
      }

      @font-face {
        font-family: 'Playfair Display';
        src: url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');
      }

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

      body {
        font-family: 'Montserrat', sans-serif;
        color: var(--text-color);
        line-height: 1.6;
        overflow-x: hidden;
        background-color: var(--secondary-color);
      }

      h1, h2, h3, h4, h5, h6 {
        font-family: 'Playfair Display', serif;
        font-weight: 600;
      }

      .navbar {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: var(--shadow-sm);
        padding: 1rem 0;
        transition: var(--transition);
      }

      .navbar.scrolled {
        padding: 0.5rem 0;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--shadow-md);
      }

      .navbar-brand {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-size: 1.5rem;
        color: var(--primary-dark) !important;
        display: flex;
        align-items: center;
      }

      .navbar-brand i {
        margin-right: 0.5rem;
        font-size: 1.8rem;
      }

      .nav-link {
        color: var(--dark-color) !important;
        font-weight: 500;
        margin: 0 0.5rem;
        position: relative;
        transition: var(--transition);
      }

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

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

      .nav-link.active {
        color: var(--primary-color) !important;
      }

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

      .btn-primary {
        background: var(--gradient-primary);
        border: none;
        padding: 0.75rem 1.75rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        transition: var(--transition);
        box-shadow: var(--shadow-sm);
      }

      .btn-primary:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }

      .btn-accent {
        background: var(--gradient-accent);
        color: white;
        border: none;
        padding: 0.75rem 1.75rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        transition: var(--transition);
        box-shadow: var(--shadow-sm);
      }

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

      .hero {
        background: url('img/hero3.png') center/cover no-repeat;
        min-height: 100vh;
        color: var(--light-color);
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
      }

      .hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(90, 193, 162, 0.2) 0%, rgba(26, 46, 53, 0.8) 100%);
        z-index: 1;
      }

      .hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
      }

      .hero h1 {
        font-size: 4rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }

      .hero p {
        font-size: 1.5rem;
        margin-bottom: 2.5rem;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      }

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

      .section-title {
        color: var(--primary-dark);
        font-weight: 700;
        margin-bottom: 3rem;
        position: relative;
        display: inline-block;
      }

      .section-title::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 50px;
        height: 3px;
        background: var(--accent-color);
      }

      .section-title.center::after {
        left: 50%;
        transform: translateX(-50%);
      }

      .bg-light {
        background-color: var(--secondary-color) !important;
      }

      .bg-dark {
        background-color: var(--dark-color) !important;
        color: white;
      }

      .bg-primary {
        background: var(--gradient-primary) !important;
        color: white;
      }

      .service-card {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        height: 100%;
        transition: var(--transition);
        box-shadow: var(--shadow-sm);
        border: 1px solid rgba(0, 0, 0, 0.05);
      }

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

      .service-card i {
        font-size: 2.5rem;
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        display: inline-block;
      }

      .service-card h4 {
        color: var(--primary-dark);
        margin-bottom: 1rem;
      }

      .service-card ul {
        list-style-type: none;
        padding-left: 0;
      }

      .service-card ul li {
        padding: 0.25rem 0;
        position: relative;
        padding-left: 1.5rem;
      }

      .service-card ul li::before {
        content: '\f00c';
        font-family: 'bootstrap-icons';
        position: absolute;
        left: 0;
        color: var(--primary-color);
      }

      .feature-box {
        text-align: center;
        padding: 2rem;
        transition: var(--transition);
      }

      .feature-box i {
        font-size: 3rem;
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        background: rgba(90, 193, 162, 0.1);
        width: 80px;
        height: 80px;
        line-height: 80px;
        border-radius: 50%;
        display: inline-block;
        transition: var(--transition);
      }

      .feature-box:hover i {
        background: var(--primary-color);
        color: white;
        transform: scale(1.1);
      }

      .feature-box h5 {
        margin-bottom: 1rem;
      }

      .feature-box p {
        color: var(--text-light);
      }

      .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
        transition: var(--transition);
      }

      .gallery-item img {
        transition: var(--transition);
        width: 100%;
        height: auto; max-height: 400px;
        object-fit: cover;
      }

      .gallery-item:hover {
        box-shadow: var(--shadow-lg);
      }

      .gallery-item:hover img {
        transform: scale(1.05);

/* ...cortado... */

Style #2

/* --- Further lower hero content as requested --- */
.hero-content{
  padding-top:9rem;
}
@media (max-width:992px){
  .hero-content{
    padding-top:11rem;
  }
}
@media (max-width:576px){
  .hero-content{
    padding-top:13rem;
  }
}

Style #3

/* --- Prevent horizontal overflow & further adjust hero --- */
html,body{
  overflow-x:hidden;
}
.hero-content{
  padding-top:11rem;
}
@media (max-width:992px){
  .hero-content{
    padding-top:14rem;
  }
}
@media (max-width:576px){
  .hero-content{
    padding-top:17rem;
  }
}

fleteslopez.com.ar

fleteslopez.com.ar/index.html

Última modificación: 2025-12-02 18:21

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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.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 {
      --primary: #111827;
      --accent: #1d4ed8;
      --accent-hover: #1e40af;
      --accent-soft: #e0ecff;
      --text-main: #111827;
      --text-muted: #6b7280;
      --bg-soft: #f3f4f6;
      --radius-lg: 18px;
      --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.15);
      --shadow-hover: 0 25px 50px rgba(15, 23, 42, 0.2);
      --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text-main);
      background: #ffffff;
      overflow-x: hidden;
    }

    .section {
      padding: 90px 0;
      position: relative;
    }

    .section-title {
      font-size: 2.5rem;
      font-weight: 800;
      margin-bottom: 0.5rem;
      background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .section-subtitle {
      color: var(--text-muted);
      max-width: 640px;
      margin: 0.5rem auto 0;
      font-size: 1.1rem;
      line-height: 1.6;
    }

    .eyebrow {
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 0.15em;
      color: var(--accent);
      font-weight: 600;
      display: inline-block;
      margin-bottom: 0.75rem;
      position: relative;
    }

    .eyebrow::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 30px;
      height: 2px;
      background: var(--accent);
      border-radius: 2px;
    }

    /* NAVBAR */
    .navbar {
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      transition: var(--transition);
      padding: 0.75rem 0;
    }

    .navbar.scrolled {
      padding: 0.5rem 0;
      box-shadow: 0 5px 20px rgba(15, 23, 42, 0.1);
    }

    .navbar-brand span.brand-title {
      font-weight: 800;
      font-size: 1.2rem;
      line-height: 1.1;
      background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .navbar-brand span.brand-sub {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    .nav-link {
      font-weight: 500;
      color: #4b5563;
      position: relative;
      transition: var(--transition);
      padding: 0.5rem 1rem !important;
      border-radius: 8px;
    }

    .nav-link:hover,
    .nav-link:focus {
      color: var(--accent);
      background: rgba(29, 78, 216, 0.05);
    }

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

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

    .btn-cta-nav {
      font-size: 0.9rem;
      padding: 0.6rem 1.2rem;
      border-radius: 999px;
      border: none;
      background: var(--accent);
      color: #fff;
      font-weight: 600;
      transition: var(--transition);
      box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
    }

    .btn-cta-nav:hover {
      background: var(--accent-hover);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4);
    }

    .btn-cta-nav i {
      margin-right: 0.35rem;
    }

    /* HERO */
    #inicio {
      padding-top: 120px;
      padding-bottom: 100px;
      background: radial-gradient(circle at top left, #e0ecff 0, #ffffff 40%, #f9fafb 100%);
      position: relative;
      overflow: hidden;
    }

    #inicio::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 100%;
      background: url('data:image/svg+xml,<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(29,78,216,0.03)"/></svg>');
      background-size: cover;
      z-index: 0;
    }

    .hero-title {
      font-size: clamp(2.5rem, 4vw, 3.5rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      margin-bottom: 1.5rem;
      color: #0f172a;
      line-height: 1.2;
    }

    .hero-lead {
      font-size: 1.1rem;
      color: var(--text-muted);
      margin-bottom: 1.5rem;
      line-height: 1.6;
    }

    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }

    .hero-badge {
      font-size: 0.85rem;
      background: #ffffff;
      border-radius: 999px;
      padding: 0.4rem 1rem;
      border: 1px solid #e5e7eb;
      color: #374151;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: var(--transition);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .hero-badge:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      border-color: var(--accent);
    }

    .hero-badge i {
      color: var(--accent);
      font-size: 0.9rem;
    }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
      margin-bottom: 1.5rem;
    }

    .btn-hero-main {
      padding: 0.9rem 2rem;
      border-radius: 999px;
      font-weight: 600;
      border: none;
      background: var(--accent);
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      box-shadow: var(--shadow-soft);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .btn-hero-main::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: 0.5s;
    }

    .btn-hero-main:hover::before {
      left: 100%;
    }

    .btn-hero-main:hover {
      background: var(--accent-hover);
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
    }

    .btn-hero-ghost {
      padding: 0.9rem 1.8rem;
      border-radius: 999px;
      font-weight: 500;
      border: 1px solid #cbd5f5;
      background: rgba(255, 255, 255, 0.85);
      color: #1f2933;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      transition: var(--transition);
    }

    .btn-hero-ghost:hover {
      background: #ffffff;
      border-color: var(--accent);
      color: var(--accent);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .hero-footnote {
      font-size: 0.9rem;
      color: var(--text-muted);
      max-width: 500px;
    }

    .hero-image-wrapper {
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
    }

    .hero-image-card {
      border-radius: 26px;
      background: #ffffff;
      box-shadow: var(--shadow-soft);
      overflow: hidden;
      position: relative;
      transition: var(--transition);
    }

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

    .hero-image-card img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      transition: var(--transition);
    }

    .hero-image-card:hover img {
      transform: scale(1.03);
    }

    .hero-pill {
      position: absolute;
      bottom: 20px;
      left: 20px;
      background: rgba(15, 23, 42, 0.88);
      color: #
/* ...cortado... */

Style #2

/* Servicio “pro”: icono + subtítulo + tags */
.service-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
}

.service-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
}

.service-card h3 {
  margin-bottom: 0.15rem;
}

.service-card-sub {
  font-size: 0.86rem;
  color: var(--text-muted);
}

.service-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.service-tag {
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

/* Tira de highlights arriba de los servicios */
.service-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.service-pill {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(29, 78, 216, 0.06);
  border: 1px solid rgba(129, 140, 248, 0.35);
  font-size: 0.8rem;
  color: #1f2937;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.service-pill i {
  font-size: 0.9rem;
  color: var(--accent);
}

@media (max-width: 767.98px) {
  .service-card-header {
    align-items: center;
  }
}

Style #3

:root{
      /* Colores WhatsApp */
      --wa:#25D366;
      --wa-dark:#128C7E;
      /* Colores adaptados al sitio Fletes López (azules) */
      --wa-head:#1d4ed8;          /* azul principal del sitio */
      --wa-text:#111827;
      --wa-muted:#9ca3af;
      --wa-bg:#ffffff;
      --wa-border:#e5e7eb;
    }
  
    .wa-float{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:9999;
      font-family:inherit;
    }
  
    .wa-btn{
      background:linear-gradient(135deg,var(--wa),var(--wa-dark));
      color:#fff;
      border:0;
      width:60px;
      height:60px;
      border-radius:50%;
      display:grid;
      place-items:center;
      box-shadow:0 10px 30px rgba(15,23,42,.35);
      cursor:pointer;
      transition:transform .3s, box-shadow .3s, background .3s;
      position:relative;
      overflow:hidden;
    }
    .wa-btn::after{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.25), rgba(255,255,255,0) 70%);
      opacity:0;
      transition:opacity .3s;
    }
    .wa-btn:hover{
      transform:translateY(-3px) scale(1.05);
      box-shadow:0 14px 36px rgba(15,23,42,.45);
    }
    .wa-btn:hover::after{ opacity:1; }
  
    .wa-card{
      position:absolute;
      right:0;
      bottom:74px;
      width:min(360px,92vw);
      background:var(--wa-bg);
      color:var(--wa-text);
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 18px 60px rgba(15,23,42,.45);
      border:1px solid var(--wa-border);
      transform:translateY(10px);
      opacity:0;
      transition:transform .3s, opacity .3s;
    }
    .wa-card[aria-modal="true"]{
      transform:translateY(0);
      opacity:1;
    }
  
    .wa-head{
      display:flex;
      align-items:center;
      gap:12px;
      padding:14px;
      background:linear-gradient(135deg,#1d4ed8,#3b82f6);
      border-bottom:1px solid var(--wa-border);
      color:#f9fafb;
    }
  
    .wa-avatar{
      width:40px;
      height:40px;
      border-radius:8px;
      background:#0f172a;
      display:grid;
      place-items:center;
      border:1px solid rgba(148,163,184,.7);
      overflow:hidden;
    }
  
    .wa-title{
      font-weight:700;
      font-size:1.05rem;
    }
  
    .wa-status{
      font-size:.85rem;
      color:#e5e7eb;
      display:flex;
      align-items:center;
      gap:6px;
    }
    .wa-status::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:#22c55e;
    }
  
    .wa-close{
      margin-left:auto;
      background:transparent;
      color:#0b1120;
      border:0;
      font-size:24px;
      cursor:pointer;
      opacity:.7;
      width:32px;
      height:32px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:.2s;
      background:rgba(15,23,42,.06);
    }
    .wa-close:hover{
      opacity:1;
      background:rgba(15,23,42,.12);
    }
  
    .wa-body{
      padding:12px 14px;
      max-height:40vh;
      overflow:auto;
      background:#ffffff;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
  
    .wa-bubble{
      max-width:88%;
      padding:10px 12px;
      border-radius:14px;
      line-height:1.35;
      box-shadow:0 4px 10px rgba(15,23,42,.08);
      animation:fadeIn .25s ease;
      font-size:.95rem;
    }
  
    @keyframes fadeIn{
      from{opacity:0; transform:translateY(5px);}
      to{opacity:1; transform:none;}
    }
  
    .wa-bot{
      background:#f9fafb;
      border:1px solid #e5e7eb;
      align-self:flex-start;
      border-bottom-left-radius:4px;
    }
  
    .wa-user{
      background:#e0ecff;
      border:1px solid #bfdbfe;
      align-self:flex-end;
      border-bottom-right-radius:4px;
    }
  
    .wa-compose{
      display:grid;
      grid-template-columns:1fr auto;
      gap:8px;
      padding:10px;
      background:#f9fafb;
      border-top:1px solid var(--wa-border);
    }
  
    .wa-compose textarea{
      resize:none;
      border-radius:12px;
      padding:10px 12px;
      border:1px solid var(--wa-border);
      background:#ffffff;
      color:var(--wa-text);
      outline:none;
      min-height:44px;
      font-family:inherit;
      font-size:.95rem;
      transition:.2s;
    }
  
    .wa-compose textarea:focus{
      border-color:#1d4ed8;
      box-shadow:0 0 0 2px rgba(37,99,235,.18);
    }
  
    .wa-send{
      background:var(--wa);
      color:#ffffff;
      border:0;
      border-radius:12px;
      padding:0 16px;
      font-weight:700;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:.2s;
    }
  
    .wa-send:hover{
      background:var(--wa-dark);
      transform:scale(1.05);
    }
  
    .wa-body::-webkit-scrollbar{ width:6px; }
    .wa-body::-webkit-scrollbar-track{ background:rgba(15,23,42,.02); border-radius:3px; }
    .wa-body::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.25); border-radius:3px; }
    .wa-body::-webkit-scrollbar-thumb:hover{ background:rgba(15,23,42,.35); }
  
    @media (max-width:480px){
      .wa-float{ right:12px; bottom:12px; }
      .wa-card{ width:calc(100vw - 24px); right:0; }
    }

piedrafirme.com.ar

piedrafirme.com.ar/index.php

Última modificación: 2025-12-02 17:30

CSS links: 4 style blocks: 2

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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css
https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;600;700;800&display=swap

Bloques <style> inline detectados OK

Style #1

:root {
            --primary: #006164;
            --primary-soft: #0b7f83;
            --primary-light: #e6f4f5;
            --accent: #d9bd7d;
            --accent-dark: #c4a862;
            --dark: #12212a;
            --muted: #6b7280;
            --line: #e2e8f0;
            --bg: #f5f7fb;
            --radius: 20px;
            --shadow: 0 10px 30px rgba(0, 97, 100, .08);
            --shadow-lg: 0 20px 50px rgba(0, 97, 100, .14);
            --shadow-xl: 0 25px 70px rgba(0, 97, 100, .20);
            --grad: linear-gradient(135deg, #006164 0%, #0b7f83 50%, #d9bd7d 100%);
            --transition: .35s cubic-bezier(0.4, 0, 0.2, 1);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
            color: var(--dark);
            background: #fff;
            line-height: 1.7;
            overflow-x: hidden;
            position: relative;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            right: 0;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(217, 189, 125, .06), transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            line-height: 1.2;
        }

        /* ===== NAVBAR ===== */
        .navbar-piedra {
            background: rgba(255, 255, 255, .92);
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            border-bottom: 1px solid rgba(0, 97, 100, .08);
            box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
            transition: var(--transition);
            padding: 1rem 0;
        }

        .navbar-piedra.scrolled {
            background: rgba(255, 255, 255, .98);
            box-shadow: 0 4px 30px rgba(0, 0, 0, .08);
        }

        .navbar-piedra .navbar-brand {
            font-weight: 800;
            letter-spacing: .05em;
            text-transform: uppercase;
            font-size: .95rem;
            color: var(--dark);
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: .8rem;
        }

        .navbar-piedra .navbar-brand:hover {
            color: var(--primary);
            transform: translateY(-1px);
        }

        .navbar-piedra .nav-link {
            font-weight: 600;
            letter-spacing: .03em;
            font-size: .88rem;
            color: #1f2933;
            padding: .6rem 1.1rem !important;
            margin: 0 .15rem;
            border-radius: 12px;
            transition: var(--transition);
            position: relative;
        }

        .navbar-piedra .nav-link::after {
            content: '';
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: 24px;
            height: 3px;
            background: var(--accent);
            border-radius: 999px;
            transition: var(--transition);
        }

        .navbar-piedra .nav-link:hover,
        .navbar-piedra .nav-link.active {
            color: var(--primary);
            background: var(--primary-light);
        }

        .navbar-piedra .nav-link:hover::after,
        .navbar-piedra .nav-link.active::after {
            transform: translateX(-50%) scaleX(1);
        }

        .brand-img {
            height: 86px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .1));
            transition: var(--transition);
        }

        .navbar-brand:hover .brand-img {
            transform: rotate(-3deg) scale(1.05);
        }

        .brand-text {
            white-space: nowrap;
            max-width: 60vw;
            overflow: hidden;
            text-overflow: ellipsis;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ===== HERO ===== */
        .hero {
            position: relative;
            min-height: 85vh;
            display: flex;
            align-items: center;
            background:
                radial-gradient(ellipse at 15% 20%, rgba(217, 189, 125, .12), transparent 50%),
                radial-gradient(ellipse at 85% 10%, rgba(0, 97, 100, .08), transparent 55%),
                linear-gradient(180deg, #fafbfc 0%, #f0f4f8 100%);
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: -200px;
            right: -200px;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(217, 189, 125, .15), transparent 65%);
            border-radius: 50%;
            animation: float 20s ease-in-out infinite;
        }

        .hero::after {
            content: '';
            position: absolute;
            bottom: -150px;
            left: -150px;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(0, 97, 100, .1), transparent 65%);
            border-radius: 50%;
            animation: float 25s ease-in-out infinite reverse;
        }

        @keyframes float {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg)
            }

            33% {
                transform: translate(30px, -30px) rotate(5deg)
            }

            66% {
                transform: translate(-20px, 20px) rotate(-3deg)
            }
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            width: 100%;
            padding-top: 5rem;
            padding-bottom: 4rem;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .45rem 1rem;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(0, 97, 100, .1), rgba(0, 97, 100, .05));
            border: 1px solid rgba(0, 97, 100, .15);
            color: var(--primary);
            font-size: .82rem;
            font-weight: 600;
            margin-bottom: 1rem;
            animation: slideDown .8s ease;
            box-shadow: 0 4px 15px rgba(0, 97, 100, .08);
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        .hero-eyebrow {
            text-transform: uppercase;
            letter-spacing: .25em;
            font-size: .8rem;
            color: var(--accent-dark);
            font-weight: 700;
            margin-bottom: .8rem;
            animation: slideDown .8s .1s ease both;
        }

        .hero-title {
            font-size: clamp(2.4rem, 4vw, 4rem);
            line-height: 1.15;
            margin-bottom: 1.3rem;
            color: var(--dark);
            animation: slideDown .8s .2s ease both;
            font-weight: 800;
        }

        .hero-highlight {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-colo
/* ...cortado... */

Style #2

:root{
    --wa:#25D366;
    --wa-dark:#128C7E;
    --wa-text:#12212a;
    --wa-muted:#6b7280;
    --wa-bg:#ffffff;
    --wa-border:#e4e4e4;
    /* color cabeza acorde a la web (primary Piedra Firme) */
    --wa-head:#006164;
  }

  .wa-float{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9999;
    font-family:inherit;
  }

  .wa-btn{
    background:linear-gradient(135deg,var(--wa),var(--wa-dark));
    color:#fff;
    border:0;
    width:60px;
    height:60px;
    border-radius:50%;
    display:grid;
    place-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    cursor:pointer;
    transition:transform .3s, box-shadow .3s, background .3s;
    position:relative;
    overflow:hidden;
  }
  .wa-btn::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.25), rgba(255,255,255,0) 70%);
    opacity:0;
    transition:opacity .3s;
  }
  .wa-btn:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 14px 36px rgba(0,0,0,.35);
  }
  .wa-btn:hover::after{ opacity:1; }

  .wa-card{
    position:absolute;
    right:0;
    bottom:74px;
    width:min(360px,92vw);
    background:var(--wa-bg);
    color:var(--wa-text);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,.25);
    border:1px solid var(--wa-border);
    transform:translateY(10px);
    opacity:0;
    transition:transform .3s, opacity .3s;
  }
  .wa-card[aria-modal="true"]{
    transform:translateY(0);
    opacity:1;
  }

  .wa-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    background:var(--wa-head);
    border-bottom:1px solid var(--wa-border);
    color:#f9fafb;
  }

  .wa-avatar{
    width:40px;
    height:40px;
    border-radius:8px;
    background:#fff;
    display:grid;
    place-items:center;
    border:1px solid var(--wa-border);
    overflow:hidden;
  }

  .wa-title{
    font-weight:700;
    font-size:1.05rem;
  }

  .wa-status{
    font-size:.85rem;
    color:var(--wa-muted);
    display:flex;
    align-items:center;
    gap:6px;
  }
  .wa-status::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--wa);
  }

  .wa-close{
    margin-left:auto;
    background:transparent;
    color:#000;
    border:0;
    font-size:24px;
    cursor:pointer;
    opacity:.6;
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
  }
  .wa-close:hover{
    opacity:1;
    background:rgba(0,0,0,.06);
  }

  .wa-body{
    padding:12px 14px;
    max-height:40vh;
    overflow:auto;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .wa-bubble{
    max-width:88%;
    padding:10px 12px;
    border-radius:14px;
    line-height:1.35;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
    animation:fadeIn .25s ease;
    font-size:.95rem;
  }

  @keyframes fadeIn{
    from{opacity:0; transform:translateY(5px);}
    to{opacity:1; transform:none;}
  }

  .wa-bot{
    background:#f7f7f7;
    border:1px solid #e8e8e8;
    align-self:flex-start;
    border-bottom-left-radius:4px;
  }

  .wa-user{
    background:#e9fdf1;
    border:1px solid #c4f1d8;
    align-self:flex-end;
    border-bottom-right-radius:4px;
  }

  .wa-compose{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    padding:10px;
    background:#fafafa;
    border-top:1px solid var(--wa-border);
  }

  .wa-compose textarea{
    resize:none;
    border-radius:12px;
    padding:10px 12px;
    border:1px solid var(--wa-border);
    background:#ffffff;
    color:var(--wa-text);
    outline:none;
    min-height:44px;
    font-family:inherit;
    font-size:.95rem;
    transition:.2s;
  }

  .wa-compose textarea:focus{
    border-color:var(--wa);
    box-shadow:0 0 0 2px rgba(37,211,102,.15);
  }

  .wa-send{
    background:var(--wa);
    color:#ffffff;
    border:0;
    border-radius:12px;
    padding:0 16px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
  }

  .wa-send:hover{
    background:var(--wa-dark);
    transform:scale(1.05);
  }

  .wa-body::-webkit-scrollbar{ width:6px; }
  .wa-body::-webkit-scrollbar-track{ background:rgba(0,0,0,.02); border-radius:3px; }
  .wa-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:3px; }
  .wa-body::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.3); }

  @media (max-width:480px){
    .wa-float{ right:12px; bottom:12px; }
    .wa-card{ width:calc(100vw - 24px); right:0; }
  }

generadoresargentina.com.ar

generadoresargentina.com.ar/index.html

Última modificación: 2025-11-28 17:12

CSS links: 3 style blocks: 20

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

p.section-subtitle {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  h2.section-title {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Catálogo: permitir que el iframe “full-bleed” no se recorte por el card */
  #catalogo .card-modern{
    overflow: visible !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Refuerzo: el propio iframe sin radios dentro del card */
  #catalogo .card-modern iframe{
    border-radius: 0 !important;
  }

Style #2

.section-subtitle-muted {
    color: #6c757d !important;
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 1rem;
    line-height: 1.5;
  }

  .section-title{
    font-size:2.5rem;
    font-weight:900;
    text-align:left !important;
    margin-bottom:.6rem;
    position:relative;
    display:inline-block;
  }
  .section-title::after{
    content:"";
    position:absolute;
    bottom:-10px;
    left:0;
    width:60px;
    height:4px;
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius:2px;
  }
  .section-subtitle{
    color:var(--gray-600);
    text-align:left !important;
    margin:0 0 1.6rem !important;
    max-width:760px;
  }
  .catalogo-iframe-wrapper {
    width: 100%;
  }
  
  /* Altura por defecto (mobile / general) */
  .catalogo-iframe {
    width: 100%;
    min-height: 420px; /* ajustá si querés un poco menos/más */
    border: 0;
  }
  
  /* En desktop, un poco más de alto */
  @media (min-width: 992px) {
    .catalogo-iframe {
      min-height: 620px;  /* subimos un poco, sin ocupar toda la pantalla */
    }
  }

  :root {
    --primary: #f2a700;
    --primary-dark: #c88400;
    --primary-light: #ffd266;
    --accent: #000000;
    --ink: #0f172a;
    --light: #ffffff;
    --gray-100: #f5f6f8;
    --gray-200: #eceff3;
    --gray-300: #d7dde5;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #111827;
    --radius: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow: 0 8px 20px rgba(0,0,0,.08);
    --shadow-md: 0 12px 24px rgba(0,0,0,.12);
    --shadow-lg: 0 24px 48px rgba(0,0,0,.15);
    --transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-light));
    --gradient-dark: linear-gradient(135deg, #000, #333);
    --gradient-hero: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  }
  
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:var(--light);
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,h5,h6{font-weight:800;color:var(--gray-900)}
  .text-brand{color:var(--primary)}
  .bg-brand{background:var(--primary)!important}
  .badge-brand{background:var(--primary); color:#000; font-weight:700}
  
  /* Navbar mejorada */
  .navbar{
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 1rem 0;
    transition: var(--transition);
  }
  .navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }
  .navbar .navbar-brand{
    font-weight:900; letter-spacing:.2px; display:flex; align-items:center; gap:.5rem; color:var(--accent);
  }
  .navbar .navbar-brand img{height:40px; width:auto; transition: var(--transition);}
  .navbar .navbar-brand:hover img {
    transform: scale(1.05);
  }
  .navbar .nav-link{
    color:var(--gray-700); 
    border-radius:10px; 
    padding:.5rem .9rem !important; 
    font-weight:600;
    position: relative;
    transition: var(--transition);
  }
  .navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: var(--transition);
    transform: translateX(-50%);
  }
  .navbar .nav-link:hover::after,
  .navbar .nav-link.active::after {
    width: 70%;
  }
  .navbar .nav-link:hover{color:var(--accent)}
  .navbar .nav-link.active{color:#000; background:linear-gradient(90deg, rgba(242,167,0,.15), rgba(0,0,0,.05))}
  
  /* Botones mejorados */
  .btn-primary{
    background: var(--gradient-primary);
    border:none; 
    border-radius:var(--radius); 
    font-weight:800; 
    color:#000; 
    box-shadow:var(--shadow);
    padding: 0.75rem 1.5rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    z-index: 1;
  }
  .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    opacity: 0;
    transition: var(--transition);
    z-index: -1;
  }
  .btn-primary:hover::before {
    opacity: 1;
  }
  .btn-primary:hover{
    transform:translateY(-3px); 
    box-shadow: var(--shadow-md);
  }
  
  .btn-outline-dark{
    border:2px solid #000; 
    color:#000; 
    border-radius:var(--radius); 
    font-weight:700;
    padding: 0.75rem 1.5rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .btn-outline-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transform: translateX(-100%);
    transition: var(--transition);
    z-index: -1;
  }
  .btn-outline-dark:hover::before {
    transform: translateX(0);
  }
  .btn-outline-dark:hover{
    color:#fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow);
  }
  
  /* Hero base (luego se reemplaza por HERO PRO)*/
  .hero{
    padding: 7rem 0 5rem; 
    background: var(--gradient-hero);
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 70%;
    height: 200%;
    background: radial-gradient(circle, rgba(242,167,0,0.05) 0%, rgba(242,167,0,0) 70%);
    z-index: 0;
  }
  .hero-content {
    position: relative;
    z-index: 1;
  }
  .hero .chip{
    display:inline-flex; 
    align-items:center; 
    gap:.5rem;
    padding:.5rem 1rem; 
    border-radius:999px;
    background:rgba(242,167,0,.15); 
    color:#000; 
    font-weight:700; 
    font-size:.9rem;
    border:1px solid rgba(0,0,0,.06);
    backdrop-filter: blur(10px);
    animation: fadeInUp 0.8s ease;
  }
  .hero h1 {
    animation: fadeInUp 0.8s ease 0.2s both;
  }
  .hero p {
    animation: fadeInUp 0.8s ease 0.4s both;
  }
  .hero .hero-illus{
    max-width:520px; 
    width:100%; 
    height:auto; 
    border-radius:var(--radius-lg); 
    box-shadow:var(--shadow-lg); 
    transition:var(--transition);
    animation: fadeInRight 1s ease 0.6s both;
  }
  .hero .hero-illus:hover{ 
    transform: translateY(-5px) scale(1.02); 
    box-shadow: var(--shadow-lg);
  }
  
  /* Secciones */
  section{padding:4rem 0; position: relative;}
  .section-title{
    font-size:2.5rem; 
    font-weight:900; 
    text-align:center; 
    margin-bottom:1rem;
    position: relative;
    display: inline-block;
  }
  .section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: 2px;
  }
  .section-subtitle{
    color:var(--gray-600); 
    text-align:center; 
    margin:0 auto 3rem; 
    max-width:760px;
    font-size: 1.1rem;
  }
  
  /* Cards mejoradas */
  .card-modern{
    background:#fff; 
    border:1px solid var(--gray-200); 
    border-radius:var(--radius-lg); 
    box-shadow:var(--shadow); 
    transition:var(--transition); 
    overflow:hidden;
    position: relative;
  }
  .card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition);
  }
  .card-modern:hover::before {
    transform: scaleX(1);
  }
  .card-modern:hover{
    transform:translateY(-8px
/* ...cortado... */

Style #3

/* Quitamos padding lateral SOLO en la sección catálogo para que el iframe no se corte */
  #catalogo .container, #catalogo .container-fluid{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* Iframe full-bleed con 100vw y centrado, sin redondeos (evita corte derecho) */
  #catalogo iframe,
  iframe.catalog-iframe,
  iframe#tienda,
  iframe[src*="tienda"],
  iframe[src*="store"],
  iframe[src*="catalog"],
  iframe[src*="shop"]{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    display:block !important;
    border:0 !important;
    border-radius:0 !important;
    background:#fff;
  }
  /* Alturas generosas para mostrar muchos productos sin quedar corto (cross-origin safe) */
  @media (max-width:576px){
    #catalogo iframe,
    iframe.catalog-iframe,
    iframe#tienda,
    iframe[src*="tienda"],
    iframe[src*="store"],
    iframe[src*="catalog"],
    iframe[src*="shop"]{ min-height:135vh !important; }
  }
  @media (min-width:576px) and (max-width:991.98px){
    #catalogo iframe,
    iframe.catalog-iframe,
    iframe#tienda,
    iframe[src*="tienda"],
    iframe[src*="store"],
    iframe[src*="catalog"],
    iframe[src*="shop"]{ min-height:105vh !important; }
  }
  @media (min-width:992px){
    #catalogo iframe,
    iframe.catalog-iframe,
    iframe#tienda,
    iframe[src*="tienda"],
    iframe[src*="store"],
    iframe[src*="catalog"],
    iframe[src*="shop"]{ min-height:92vh !important; }
  }
  /* Seguridad */
  html, body{overflow-x:hidden}

Style #4

@media (max-width: 576px){
  .navbar{ padding:.5rem 0 !important; }
  .hero{ padding:3.25rem 0 1.5rem !important; }
  .hero h1{
    font-size:1.8rem !important;
    line-height:1.15 !important;
    margin:.6rem 0 .75rem !important;
    letter-spacing:.1px;
  }
  .hero .mt-4{ margin-top:1rem !important; }
  .hero p.lead{
    font-size:1rem !important;
    line-height:1.45 !important;
    margin-bottom:1rem !important;
  }
  .hero .chip{
    font-size:.8rem !important;
    padding:.4rem .8rem !important;
  }
  .list-check{ margin-bottom:1rem !important; }
  .list-check li{
    margin:.25rem 0 !important;
    gap:.4rem !important;
    align-items:flex-start !important;
  }
  .list-check i{ margin-top:.15rem !important; }
  .hero .d-flex{ gap:.5rem !important; }
  .hero .btn{ padding:.6rem 1rem !important; }
  section{ padding:2.75rem 0 !important; }
}

Style #5

/* === Eyebrow label + hero stack compacto === */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.28rem .7rem;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.15px;
  border-radius:999px;
  color:#000;
  background:linear-gradient(135deg, rgba(242,167,0,.18), rgba(242,167,0,.08));
  border:1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(6px);
}
.hero .eyebrow{ margin:0 0 .5rem; }
.hero h1{ margin:.2rem 0 .65rem !important; line-height:1.1; }
.hero .lead{ margin:0 0 .9rem !important; }
.hero .list-check{ margin:.2rem 0 .9rem !important; }
.hero .d-flex{ gap:.6rem !important; }

Style #6

/* Títulos y subtítulos más cercanos en secciones */
.section-title{ margin-bottom:.4rem !important; }
.section-subtitle{ margin:0 auto 1.6rem !important; }

Style #7

/* Hero más compacto en desktop */
@media (min-width: 577px){
  .hero{ padding: 5.25rem 0 3.25rem !important; }
}

Style #8

#catalogo.section,
  section#catalogo {
    padding-top: clamp(1.25rem, 1.8vw, 2rem) !important;
    padding-bottom: clamp(1.25rem, 1.8vw, 2rem) !important;
    scroll-margin-top: 80px;
  }
  #catalogo .section-title{ margin-bottom:.25rem !important; }
  #catalogo .section-subtitle{ margin:0 0 .75rem !important; }

  #catalogo iframe,
  #catalogo .catalog-iframe{
    display:block !important;
  }
  @media (max-width: 576px){
    #catalogo iframe,
    #catalogo .catalog-iframe{ min-height: 135vh !important; }
  }
  @media (min-width: 577px) and (max-width: 991.98px){
    #catalogo iframe,
    #catalogo .catalog-iframe{ min-height: 115vh !important; }
  }
  @media (min-width: 992px){
    #catalogo iframe,
    #catalogo .catalog-iframe{ min-height: 92vh !important; }
  }
  #catalogo .card-modern{ margin-top:.25rem !important; }
  #catalogo .text-center.mt-4{ margin-top:1.25rem !important; }

Style #9

section#catalogo:has(.cards),
  #catalogo:has(.cards) {
    min-height: auto !important;
    padding-top: clamp(.8rem, 1.2vw, 1.25rem) !important;
    padding-bottom: clamp(.8rem, 1.2vw, 1.25rem) !important;
  }
  #catalogo .cards { margin-bottom: .75rem !important; }
  #catalogo .catalogo-cta,
  #catalogo .open-catalog-cta,
  #catalogo .btn-open-catalog {
    margin-top: .75rem !important;
  }
  #catalogo .catalog-iframe,
  #catalogo iframe {
    min-height: auto;
  }
  @media (max-width: 576px){
    #catalogo:has(iframe),
    section#catalogo:has(iframe){
      min-height: 0;
    }
    #catalogo:has(iframe) iframe,
    section#catalogo:has(iframe) iframe{
      min-height: 125vh !important;
    }
  }
  @media (min-width: 992px){
    #catalogo:has(.cards) iframe,
    section#catalogo:has(.cards) iframe{
      min-height: 70vh !important;
    }
  }

Style #10

#catalogo .catalog-iframe,
  #catalogo iframe.catalog-iframe {
    display: none !important;
    min-height: 0 !important;
    height: auto !important;
  }
  #catalogo iframe.catalog-iframe[src*="cat="],
  #catalogo iframe.catalog-iframe[src*="categoria"],
  #catalogo iframe.catalog-iframe[src*="category"],
  #catalogo iframe.catalog-iframe[src*="productos"],
  #catalogo iframe.catalog-iframe[src*="producto"],
  #catalogo iframe.catalog-iframe[src*="product"],
  #catalogo iframe.catalog-iframe[src*="view="]{
    display: block !important;
  }
  @media (max-width: 576px){
    #catalogo iframe.catalog-iframe[src]{ min-height: 125vh !important; }
  }
  @media (min-width: 577px) and (max-width: 991.98px){
    #catalogo iframe.catalog-iframe[src]{ min-height: 105vh !important; }
  }
  @media (min-width: 992px){
    #catalogo iframe.catalog-iframe[src]{ min-height: 85vh !important; }
  }
  section#catalogo, #catalogo.section {
    padding-top: clamp(.5rem, .9vw, 1rem) !important;
    padding-bottom: clamp(.6rem, 1vw, 1.1rem) !important;
  }
  #catalogo .open-catalog-cta, 
  #catalogo .btn-open-catalog, 
  #catalogo .catalogo-cta{
    margin-top: .5rem !important;
  }

Style #11

#catalogo .catalog-iframe,
  #catalogo iframe.catalog-iframe {
    display: block !important;
    width: 100% !important;
    border: 0;
  }
  @media (max-width: 576px){
    #catalogo iframe.catalog-iframe{ min-height: 120vh !important; }
  }
  @media (min-width: 577px) and (max-width: 991.98px){
    #catalogo iframe.catalog-iframe{ min-height: 100vh !important; }
  }
  @media (min-width: 992px){
    #catalogo iframe.catalog-iframe{ min-height: 60vh !important; }
  }
  section#catalogo, #catalogo.section {
    padding-top: clamp(.6rem, 1vw, 1.1rem) !important;
    padding-bottom: clamp(.6rem, 1vw, 1.1rem) !important;
  }

Style #12

section#catalogo .container,
  #catalogo.section .container {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #catalogo .section-title,
  #catalogo .section-subtitle {
    text-align: center !important;
  }
  #catalogo .cards {
    display: grid !important;
    gap: 1.1rem;
    justify-content: center;
    align-content: start;
  }
  @media (min-width: 1200px){
    #catalogo .cards { grid-template-columns: repeat(4, minmax(240px, 1fr)); }
  }
  @media (min-width: 992px) and (max-width: 1199.98px){
    #catalogo .cards { grid-template-columns: repeat(3, minmax(260px, 1fr)); }
  }
  @media (min-width: 768px) and (max-width: 991.98px){
    #catalogo .cards { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
  }
  @media (max-width: 767.98px){
    #catalogo .cards { grid-template-columns: 1fr; }
  }
  #catalogo .card,
  #catalogo .card-modern {
    width: 100%;
    max-width: 290px;
    margin-left: auto;
    margin-right: auto;
  }
  #catalogo iframe.catalog-iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
  }

Style #13

section#catalogo .container,
  #catalogo.section .container {
    display: block !important;
    width: min(1200px, 100%) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #catalogo .row, 
  #catalogo .row-2, 
  #catalogo .row-3, 
  #catalogo .row-4 {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  #catalogo .cards {
    display: grid !important;
    width: 100% !important;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    justify-items: stretch;
    align-items: stretch;
    justify-content: center;
  }
  #catalogo .card, 
  #catalogo .card-modern {
    max-width: none !important;
    min-width: 260px;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #catalogo iframe.catalog-iframe {
    display: block !important;
    width: min(1200px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

Style #14

#catalogo iframe.catalog-iframe,
  #catalogo iframe#tiendaFrame{
    display:block !important;
    width:100% !important;
    border:0 !important;
    overflow:hidden !important;
  }
  @media (max-width: 576px){
    #catalogo iframe#tiendaFrame{ min-height: 140vh !important; }
  }
  @media (min-width: 577px) and (max-width: 991.98px){
    #catalogo iframe#tiendaFrame{ min-height: 115vh !important; }
  }
  @media (min-width: 992px){
    #catalogo iframe#tiendaFrame{ min-height: 95vh !important; }
  }

Style #15

#tienda-inline{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  #tienda-inline .container{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #tienda-inline .card-modern{
    padding: 0.75rem;
    background: #f6f7f9;
    border-radius: var(--radius-lg, 24px);
    box-shadow: var(--shadow, 0 8px 20px rgba(0,0,0,.08));
    overflow: hidden;
    border: 1px solid var(--gray-200, #eceff3);
  }
  #tienda-inline iframe#tienda2Inline{
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border: 0 !important;
    border-radius: var(--radius-lg, 24px);
    background: #fff;
    height: 520px !important;
    overflow: hidden;
  }
  #tienda-inline iframe#tienda2Inline[src*="tienda"]{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    min-height: 0 !important;
  }
  #tienda-inline .section-title,
  #tienda-inline .section-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

Style #16

#catalogo .container{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #catalogo .card-modern{
    padding: 0.75rem;
    background: #f6f7f9;
    border-radius: var(--radius-lg, 24px);
    box-shadow: var(--shadow, 0 8px 20px rgba(0,0,0,.08));
    overflow: hidden;
    border: 1px solid var(--gray-200, #eceff3);
  }
  #catalogo iframe.catalog-iframe,
  #catalogo iframe#tiendaFrame{
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border: 0 !important;
    border-radius: var(--radius-lg, 24px);
    background: #fff;
    height: 520px !important;
    overflow: auto !important;
  }
  @media (max-width: 9999px){
    #catalogo iframe#tiendaFrame{
      min-height: 0 !important;
    }
  }

Style #17

@media (min-width: 992px){
    section#catalogo,
    #catalogo.section {
      padding-top: 1.8rem !important;
      padding-bottom: 1.8rem !important;
      min-height: auto !important;
    }

    section#alquiler {
      padding-top: 2.5rem !important;
      padding-bottom: 2.8rem !important;
    }

    /* Evitar que reglas anteriores le metan min-height exagerado al iframe */
    #catalogo iframe#tiendaFrame,
    #catalogo iframe.catalog-iframe {
      min-height: 0 !important;
    }
  }

Style #18

.hero-pro{
    position: relative;
    padding: clamp(3.25rem, 6vw, 6rem) 0 clamp(1.75rem, 3vw, 3rem);
    background: var(--gradient-hero, linear-gradient(135deg, #ffffff 0%, #f8fafc 100%));
    overflow: hidden;
  }
  .hero-pro::before{
    content:"";
    position:absolute; inset:-20% -10% auto auto;
    width:70%; height:70%;
    background: radial-gradient(circle at 70% 30%, rgba(242,167,0,.10), rgba(242,167,0,0) 60%);
    pointer-events:none;
  }
  .hero-pro__content{ position: relative; z-index: 1; }
  .hero-pro__eyebrow{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.3rem .75rem; font-weight:700; font-size:.9rem;
    color:#000; border-radius:999px;
    background:linear-gradient(135deg, rgba(242,167,0,.18), rgba(242,167,0,.08));
    border:1px solid rgba(0,0,0,.06);
    backdrop-filter: blur(6px);
    margin:0 0 .5rem;
  }
  .hero-pro__title{
    margin:.2rem 0 .6rem; line-height:1.1;
    font-weight:900; font-size:clamp(1.9rem, 3.2vw, 2.75rem);
  }
  .hero-pro__lead{
    margin:0 0 1rem;
    font-size:clamp(1rem, 1.2vw, 1.125rem);
    line-height:1.5; color:var(--gray-700, #374151);
    max-width: 52ch;
  }
  .hero-pro__bullets{ margin:.2rem 0 1rem; }
  .hero-pro__bullets li{
    display:grid; grid-template-columns: 22px 1fr;
    column-gap:.55rem; row-gap:.45rem;
    align-items:flex-start;
    padding:.25rem 0;
  }
  .hero-pro__bullets i{
    color:var(--primary, #f2a700);
    font-size:1.05rem; line-height:1.2;
    margin-top:.1rem;
  }
  .hero-pro__bullets span{ line-height:1.45; }
  .hero-pro__image{
    max-width:520px; width:100%; height:auto;
    border-radius: var(--radius-lg, 24px);
    box-shadow: var(--shadow-lg, 0 24px 48px rgba(0,0,0,.15));
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .hero-pro__image:hover{ transform: translateY(-4px) scale(1.015); }
  .hero-pro__cta .btn{ padding:.65rem 1.1rem; }
  @media (max-width: 576px){
    .hero-pro__cta{ gap:.6rem !important; }
    .hero-pro__cta .btn{ width:100%; }
  }
  @media (max-width: 576px){
    .hero-pro{ padding: 3rem 0 1.4rem; }
    .hero-pro__title{ font-size:1.85rem; margin:.3rem 0 .6rem; }
    .hero-pro__lead{ font-size:1rem; margin-bottom:.9rem; }
    .hero-pro__bullets{ margin-bottom:.9rem; }
    .hero-pro__bullets li{ padding:.15rem 0; }
  }

Style #19

#tiendaFrame {
    width: 100% !important;
    max-width: 100% !important;
    height: 1800px !important;
    min-height: 1800px !important;
    border: 0 !important;
    overflow: auto !important;
    display: block !important;
  }

Style #20

.site-footer .footer-link{
      color:#fff; text-decoration:none; transition:opacity .2s ease;
    }
    .site-footer .footer-link:hover{ opacity:.7; }

odontologiacm.com.ar

odontologiacm.com.ar/index.html

Última modificación: 2025-11-28 13:51

CSS links: 3 style blocks: 2

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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.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 {
      /* Paleta de colores optimizada */
      --primary: #1a76d2;
      --primary-dark: #1565c0;
      --primary-light: #e3f2fd;
      --accent: #00b8a9;
      --accent-light: #e0f7fa;
      --text-main: #1a1a1a;
      --text-muted: #5a5a5a;
      --text-light: #8a8a8a;
      --bg-light: #f8fafc;
      --bg-white: #ffffff;
      --border-light: #e1e8ed;
      --radius-lg: 24px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --shadow-soft: 0 10px 40px rgba(0,0,0,0.08);
      --shadow-medium: 0 15px 50px rgba(0,0,0,0.12);
      --shadow-hover: 0 20px 60px rgba(0,0,0,0.15);
      --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      color: var(--text-main);
      background: var(--bg-white);
      line-height: 1.6;
      overflow-x: hidden;
    }

    a { 
      color: var(--primary); 
      text-decoration: none; 
      transition: var(--transition);
    }
    a:hover { 
      color: var(--primary-dark); 
    }

    /* NAVBAR - Mejorada */
    .navbar {
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      padding: 1rem 0;
      transition: var(--transition);
    }
    
    .navbar.scrolled {
      padding: 0.7rem 0;
      box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    }
    .navbar-brand {
      font-weight: 800;
      color: var(--primary);
      font-size: 1.1rem;
      display: flex;
      align-items: center;    /* centra logo + texto verticalmente */
      gap: 8px;               /* espacio entre logo y texto */
      line-height: 1.1;
    }
    
    /* texto de abajo */
    .navbar-brand .sub {
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--text-muted);
      letter-spacing: 0.4px;
    }
    
    /* imagen del logo en nav */
    .navbar-brand img {
      height: 29px;           /* un poco más grande para verse bien */
      display: block;
    }

    .nav-link {
      font-weight: 500;
      color: var(--text-main);
      position: relative;
      padding: 0.5rem 1rem !important;
      margin: 0 0.2rem;
      border-radius: var(--radius-sm);
      transition: var(--transition);
    }
    
    .nav-link:hover,
    .nav-link:focus,
    .nav-link.active {
      color: var(--primary);
      background-color: var(--primary-light);
    }
    
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: var(--primary);
      transition: var(--transition);
      transform: translateX(-50%);
    }
    
    .nav-link:hover::after,
    .nav-link.active::after {
      width: 80%;
    }
    
    .btn-nav-whatsapp {
      background: linear-gradient(135deg, #25D366, #128C7E);
      color: #fff !important;
      font-weight: 600;
      border-radius: 50px;
      padding: 0.6rem 1.2rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9rem;
      box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
      transition: var(--transition);
    }
    
    .btn-nav-whatsapp:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
    }
    
    .navbar-toggler {
      border: none;
      padding: 0.25rem 0.5rem;
    }
    
    .navbar-toggler:focus {
      box-shadow: none;
    }

    /* SECCIONES GENERALES */
    .section {
      padding: 100px 0;
      position: relative;
    }
    
    .section-title {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      margin-bottom: 0.5rem;
      line-height: 1.2;
    }
    
    .section-subtitle {
      color: var(--text-muted);
      max-width: 680px;
      margin-inline: auto;
      font-size: 1.1rem;
    }
    
    .eyebrow {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent);
      font-weight: 700;
      display: inline-block;
      margin-bottom: 1rem;
      position: relative;
      padding-left: 1.5rem;
    }
    
    .eyebrow::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      height: 2px;
      background: var(--accent);
    }

    /* HERO - Completamente renovado */
    #inicio {
      padding-top: 140px;
      padding-bottom: 100px;
      background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
      position: relative;
      overflow: hidden;
    }
    
    #inicio::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 60%;
      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='%231a76d2' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
      opacity: 0.7;
    }
    
    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1.2rem;
      border-radius: 50px;
      background: rgba(26, 118, 210, 0.08);
      color: var(--primary);
      font-size: 0.85rem;
      font-weight: 600;
      margin-bottom: 1.5rem;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(26, 118, 210, 0.1);
    }
    
    .hero-title {
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 800;
      margin-bottom: 1rem;
      line-height: 1.1;
      background: linear-gradient(135deg, var(--text-main) 0%, var(--primary) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .hero-lead {
      font-size: 1.2rem;
      color: var(--text-muted);
      max-width: 580px;
      margin-bottom: 2rem;
    }
    
    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.7rem;
      margin: 2rem 0;
    }
    
    .hero-badge {
      padding: 0.5rem 1rem;
      border-radius: 50px;
      background: rgba(0, 184, 169, 0.1);
      color: var(--accent);
      font-size: 0.85rem;
      font-weight: 600;
      border: 1px solid rgba(0, 184, 169, 0.2);
      transition: var(--transition);
    }
    
    .hero-badge:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 184, 169, 0.2);
    }
    
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 2rem;
    }
    
    .btn-primary-soft {
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      border: none;
      color: #fff;
      font-weight: 600;
      border-radius: 50px;
      pa
/* ...cortado... */

Style #2

:root{
    --wa:#25D366;
    --wa-dark:#128C7E;
    --wa-text:#111111;
    --wa-muted:#4a4a4a;
    --wa-bg:#ffffff;
    --wa-border:#e4e4e4;
    /* Franjita superior celeste en modo claro, en línea con el sitio */
    --wa-head:linear-gradient(135deg,#e3f2fd,#d0e7ff);
  }

  .wa-float{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9999;
    font-family:inherit;
  }

  .wa-btn{
    background:linear-gradient(135deg,var(--wa),var(--wa-dark));
    color:#fff;
    border:0;
    width:60px;
    height:60px;
    border-radius:50%;
    display:grid;
    place-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    cursor:pointer;
    transition:transform .3s, box-shadow .3s, background .3s;
    position:relative;
    overflow:hidden;
  }
  .wa-btn::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.25), rgba(255,255,255,0) 70%);
    opacity:0;
    transition:opacity .3s;
  }
  .wa-btn:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 14px 36px rgba(0,0,0,.35);
  }
  .wa-btn:hover::after{ opacity:1; }

  .wa-card{
    position:absolute;
    right:0;
    bottom:74px;
    width:min(360px,92vw);
    background:var(--wa-bg);
    color:var(--wa-text);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,.25);
    border:1px solid var(--wa-border);
    transform:translateY(10px);
    opacity:0;
    transition:transform .3s, opacity .3s;
  }
  .wa-card[aria-modal="true"]{
    transform:translateY(0);
    opacity:1;
  }

  .wa-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    background:var(--wa-head);
    border-bottom:1px solid rgba(26,118,210,0.12);
  }

  .wa-avatar{
    width:40px;
    height:40px;
    border-radius:8px;
    background:#fff;
    display:grid;
    place-items:center;
    border:1px solid var(--wa-border);
    overflow:hidden;
  }

  .wa-title{
    font-weight:700;
    font-size:1.05rem;
  }

  .wa-status{
    font-size:.85rem;
    color:var(--wa-muted);
    display:flex;
    align-items:center;
    gap:6px;
  }
  .wa-status::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--wa);
  }

  .wa-close{
    margin-left:auto;
    background:transparent;
    color:#000;
    border:0;
    font-size:24px;
    cursor:pointer;
    opacity:.6;
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
  }
  .wa-close:hover{
    opacity:1;
    background:rgba(0,0,0,.06);
  }

  .wa-body{
    padding:12px 14px;
    max-height:40vh;
    overflow:auto;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .wa-bubble{
    max-width:88%;
    padding:10px 12px;
    border-radius:14px;
    line-height:1.35;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
    animation:fadeIn .25s ease;
    font-size:.95rem;
  }

  @keyframes fadeIn{
    from{opacity:0; transform:translateY(5px);}
    to{opacity:1; transform:none;}
  }

  .wa-bot{
    background:#f7f7f7;
    border:1px solid #e8e8e8;
    align-self:flex-start;
    border-bottom-left-radius:4px;
  }

  .wa-user{
    background:#e9fdf1;
    border:1px solid #c4f1d8;
    align-self:flex-end;
    border-bottom-right-radius:4px;
  }

  .wa-compose{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    padding:10px;
    background:#fafafa;
    border-top:1px solid var(--wa-border);
  }

  .wa-compose textarea{
    resize:none;
    border-radius:12px;
    padding:10px 12px;
    border:1px solid var(--wa-border);
    background:#ffffff;
    color:var(--wa-text);
    outline:none;
    min-height:44px;
    font-family:inherit;
    font-size:.95rem;
    transition:.2s;
  }

  .wa-compose textarea:focus{
    border-color:var(--wa);
    box-shadow:0 0 0 2px rgba(37,211,102,.15);
  }

  .wa-send{
    background:var(--wa);
    color:#ffffff;
    border:0;
    border-radius:12px;
    padding:0 16px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
  }

  .wa-send:hover{
    background:var(--wa-dark);
    transform:scale(1.05);
  }

  .wa-body::-webkit-scrollbar{ width:6px; }
  .wa-body::-webkit-scrollbar-track{ background:rgba(0,0,0,.02); border-radius:3px; }
  .wa-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:3px; }
  .wa-body::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.3); }

  @media (max-width:480px){
    .wa-float{ right:12px; bottom:12px; }
    .wa-card{ width:calc(100vw - 24px); right:0; }
  }

    /* Fix navbar y overflow en móviles */
    @media (max-width: 991.98px) {
      .navbar .container {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
      }
      .navbar-collapse {
        width: 100%;
      }
      .navbar-nav {
        width: 100%;
        text-align: center;
      }
      .navbar-nav .nav-item {
        width: 100%;
      }
    }