MIX · miori360.com.ar/index.html

CSS links: 3 Embebidos: 0 Externos: 3 Inline styles: 5 Missing: 0

CSS externos (no embebidos)

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

CSS embebidos (locales)

No se pudieron embebir CSS locales.

Preview de mixed.css

/* MIXED CSS PACK */
/* Template: miori360.com.ar/index.html */
/* Template mtime: 2025-09-23 21:22:40 */

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

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

    }

    * {
      box-sizing: border-box;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .feature-icon i {
      font-size: 1.5rem;
      color: var(--brand);
    }

    /* Services Section */
    .services-section {
      background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
    }

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

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

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

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

    .service-icon i {
      font-size: 1.25rem;
      color: var(--brand);
    }

    /* Why Choose Us */
    .why-choose-card {
      text-align: center;
      padding: 2rem 1.5rem;
      transition: var(--transition);
    }

    .why-choose-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, var(--brand-light), #e0e7ff);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      transition: var(--transition);
    }

    .why-choose-card:hover .why-choose-icon {
      transform: scale(1.1);
      background: linear-gradient(135deg, var(--brand), #7c3aed);
    }

    .why-choose-card:hover .why-choose-icon i {
      color: white;
    }

    .why-choose-icon i {
      font-size: 2rem;
      color: var(--brand);
      transition: var(--transition);
    }

    /* Cases Section */
    .cases-section {
      background: linear-gradient(to bottom, #f1f5f9, #e2e8f0);
    }

    .case-slide {
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: var(--transition);
      height: 300px;
      position: relative;
    }

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

    .case-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition);
    }

    .case-slide:hover img {
      transform: scale(1.05);
    }

    .case-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
      color: white;
      padding: 1.5rem;
      transform: translateY(100%);
      transition: var(--transition);
    }

    .case-slide:hover .case-overlay {
      transform: translateY(0);
    }

    /* FAQ Section */
    .accordion-item {
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 1rem;
      overflow: hidden;
    }

    .accordion-button {
      font-weight: 600;
      padding: 1.25rem;
      background-color: var(--white);
    }

    .accordion-button:not(.collapsed) {
      background-color: var(--brand-light);
      color: var(--brand);
    }

    .accordion-button:focus {
      box-shadow: none;
      border-color: var(--brand);
    }

    /* Contact Section */
    .contact-section {
      background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
      color: white;
    }

    .contact-section .section-title {
      background: linear-gradient(135deg, white, #cbd5e1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .contact-section .section-subtitle {
      color: #cbd5e1;
    }

    .contact-form {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border-radius: var(--radius);
      padding: 2rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .contact-form .form-control {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      border-radius: 8px;
      padding: 0.75rem 1rem;
    }

    .contact-form .form-control::placeholder {
      color: rgba(255, 255, 255, 0.6);
    }

    .contact-form .form-control:focus {
      background: rgba(255, 255, 255, 0.15);
      border-color: var(--brand);
      box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
      color: white;
    }

    .contact-info {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border-radius: var(--radius);
      padding: 2rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .contact-info-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .contact-info-icon {
      width: 50px;
      height: 50px;
      background: rgba(37, 99, 235, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .contact-info-icon i {
      font-size: 1.25rem;
      color: var(--brand);
    }

    /* Footer */
    footer {
      background: #0f172a;
      color: #94a3b8;
      padding: 4rem 0 2rem;
    }

    .footer-logo {
      font-weight: 800;
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }

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

    .footer-links h6 {
      color: #e2e8f0;
      font-weight: 600;
      margin-bottom: 1.5rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 0.9rem;
    }

    .footer-links ul {
      list-style: none;
      padding: 0;
    }

    .footer-links li {
      margin-bottom: 0.75rem;
    }

    .footer-links a {
      color: #94a3b8;
      text-decoration: none;
      transition: var(--transition);
    }

    .footer-links a:hover {
      color: var(--brand);
    }

    .social-links {
      display: flex;
      gap: 1rem;
      margin-top: 1.5rem;
    }

    .social-link {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
    }

    .social-link:hover {
      background: var(--brand);
      transform: translateY(-3px);
    }

    .social-link i {
      color: #94a3b8;
      transition: var(--transition);
    }

    .social-link:hover i {
      color: white;
    }

    .copyright {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 2rem;
      margin-top: 3rem;
      text-align: center;
      font-size: 0.9rem;
    }

    /* WhatsApp FAB */
    .whatsapp-fab {
      position: fixed;
      right: 2rem;
      bottom: 2rem;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #25D366;
      color: white;
      box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
      z-index: 1000;
      transition: var(--transition);
      animation: pulse 2s infinite;
    }

    .whatsapp-fab:hover {
      transform: scale(1.1);
      box-shadow: 0 15px 30px rgba(37, 211, 102, 0.6);
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
      }
      70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
      }
    }

    /* Responsive */
    @media (max-width: 768px) {
      .hero h1 {
        font-size: 2.5rem;
      }
      
      .section-title {
        font-size: 2rem;
      }
      
      .section {
        padding: 3rem 0;
      }
      
      .hero {
        padding: 6rem 0 3rem;
      }
      
      .hero::before {
        width: 100%;
        opacity: 0.3;
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Manifest preview

{
    "template": "miori360.com.ar/index.html",
    "template_mtime": 1758662560,
    "template_mtime_human": "2025-09-23T21:22:40+00:00",
    "css_links_found": [
        "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"
    ],
    "css_links_external": [
        "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"
    ],
    "css_links_embedded": [],
    "inline_style_blocks": 5,
    "inline_imports_external": [],
    "inline_imports_embedded": [],
    "missing_css_files": []
}