• https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
• https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap
• https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css

/* MIXED CSS PACK */
/* Template: aguaquerika.com.ar/index.html */
/* Template mtime: 2026-02-20 12:28:18 */

/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css */

/* ===== INLINE <style> BLOCK #1 ===== */
o tu CSS propio abajo, dejalo tal cual -->

  <style>
    /* ===== VARIABLES PREMIUM (respetando gama de colores) ===== */
    :root {
      --brand: #1f9d45;         /* verde principal - vibrante */
      --brand-dark: #0f7a33;     /* verde oscuro - profundidad */
      --brand-soft: rgba(31, 157, 69, 0.1);
      --brand-glow: rgba(31, 157, 69, 0.4);
      --ink: #0b1a2e;            /* casi negro para textos */
      --muted: #4a5a6e;          /* gris con alma azulada */
      --card-bg: #ffffff;
      --bg: #f4faf6;             /* fondo con un suspiro verde */
      --ring: rgba(31, 157, 69, 0.5);
      --radius: 24px;            /* más grande y elegante */
      --radius-sm: 16px;
      --shadow-sm: 0 8px 20px -6px rgba(11, 26, 46, 0.12);
      --shadow-md: 0 20px 35px -10px rgba(11, 26, 46, 0.2);
      --shadow-lg: 0 30px 50px -15px rgba(11, 26, 46, 0.25);
      --transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      color: var(--ink);
      background: var(--bg);
      overflow-x: hidden;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    /* ===== TIPOGRAFÍA PREMIUM ===== */
    h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

    .display-xl {
      font-size: clamp(2.5rem, 5vw, 3.8rem);
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    /* ===== COMPONENTES REUTILIZABLES ===== */
    .btn {
      border-radius: 60px;
      padding: 0.75rem 1.5rem;
      font-weight: 600;
      transition: var(--transition);
      border: 2px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .btn-brand {
      background: var(--brand);
      color: white;
      box-shadow: 0 15px 25px -8px var(--brand-glow);
    }

    .btn-brand:hover {
      background: var(--brand-dark);
      color: white;
      transform: scale(1.02);
      box-shadow: 0 20px 30px -8px var(--brand-glow);
    }

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

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

    .btn-light-custom {
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: white;
    }
    .btn-light-custom:hover {
      background: rgba(255, 255, 255, 0.4);
      color: white;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--brand-dark);
      background: var(--brand-soft);
      padding: 0.5rem 1rem;
      border-radius: 60px;
      font-size: 0.8rem;
      border: 1px solid rgba(31, 157, 69, 0.3);
      backdrop-filter: blur(4px);
    }

    .section-title {
      font-size: clamp(2rem, 3.5vw, 2.8rem);
      font-weight: 800;
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    .section-subtitle {
      color: var(--muted);
      font-size: 1.1rem;
      max-width: 65ch;
      margin: 0 auto 2rem auto;
    }

    /* ===== NAVBAR DE LUJO ===== */
    .navbar {
      background: rgba(244, 250, 246, 0.8);
      backdrop-filter: blur(15px);
      border-bottom: 1px solid rgba(11, 26, 46, 0.08);
      padding: 0.8rem 0;
    }

    .navbar .navbar-brand {
      font-weight: 800;
      font-size: 1.5rem;
      letter-spacing: -0.02em;
      color: var(--ink);
    }

    .navbar .navbar-brand span{
      background: none !important;
      width: auto !important;
      height: auto !important;
      border-radius: 0 !important;
      display: inline !important;
      box-shadow: none !important;
    }


    .navbar-nav .nav-link {
      font-weight: 600;
      color: var(--ink) !important;
      padding: 0.5rem 1rem !important;
      transition: var(--transition);
      border-radius: 60px;
    }

    .navbar-nav .nav-link:hover {
      color: var(--brand) !important;
      background: var(--brand-soft);
    }

    /* ===== HERO ESPECTACULAR ===== */
    .hero {
      padding-top: 140px;
      padding-bottom: 80px;
    }

    .hero-card {
      background: var(--card-bg);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      border: 1px solid rgba(11, 26, 46, 0.05);
      transition: var(--transition);
    }

    .hero-left {
      padding: 3rem;
      background: linear-gradient(145deg, #ffffff 0%, #fafffc 100%);
    }

    .hero h1 {
      font-size: clamp(2.2rem, 4vw, 3.2rem);
      font-weight: 800;
      line-height: 1.1;
      margin: 1.2rem 0 1rem 0;
    }

    .hero-highlight {
      color: var(--brand);
      border-bottom: 3px solid var(--brand-soft);
    }

    .hero-list {
      list-style: none;
      padding: 0;
      margin: 1.5rem 0;
      display: grid;
      gap: 0.8rem;
    }

    .hero-list li {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      font-weight: 500;
    }

    .hero-list .dot {
      width: 12px;
      height: 12px;
      background: var(--brand);
      border-radius: 50%;
      box-shadow: 0 0 0 5px rgba(31, 157, 69, 0.2);
    }

        .hero-right {
      background: radial-gradient(ellipse at 80% 30%, rgba(31, 157, 69, 0.15), transparent 60%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(1.25rem, 3vw, 2.25rem);
      border-left: 1px solid rgba(11, 26, 46, 0.05);
      height: 100%;
    }

    /* HERO media: ocupa bien el lado derecho sin quedar “chiquita” */
    .hero-media{
      width: 100%;
      max-width: 560px;
    }

    .hero-media-img{
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-md);
      background: #fff;
      padding: clamp(.6rem, 1.2vw, 1rem);
      transition: var(--transition);
    }
    .hero-media-img:hover{
      transform: scale(1.01);
      box-shadow: var(--shadow-lg);
    }

    /* ===== CARDS CON GLAMOUR ===== */
    .card-premium {
      background: var(--card-bg);
      border: 1px solid rgba(11, 26, 46, 0.05);
      border-radius: var(--radius-sm);
      padding: 2rem 1.5rem;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .card-premium::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--brand), var(--brand-dark));
      transform: scaleX(0);
      transition: var(--transition);
    }

    .card-premium:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-md);
    }

    .card-premium:hover::before {
      transform: scaleX(1);
    }

    .card-premium .icon {
      width: 90px;              /* MÁS GRANDE para tus PNG (20/12/6 + soda) */
      height: 90px;             /* MÁS GRANDE */
      background: var(--brand-soft);
      border-radius: 28px;      /* Más proporcional */
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.8rem;
      border: 1px solid rgba(31, 157, 69, 0.25);
      padding: 12px;            /* Espacio interno */
    }

    .card-premium .icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
.card-premium h5 {
      font-weight: 800;
      margin-bottom: 0.5rem;
      font-size: 1.4rem;
    }

    .card-premium p {
      color: var(--muted);
      margin: 0;
    }

    /* ===== SECCIÓN DE CONTACTO ELEVADA ===== */
    .contact-wrap {
      background: var(--card-bg);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }

    .contact-side {
      background: linear-gradient(120deg, #f0f9f4, #ffffff);
      padding: 3rem 2rem;
      height: 100%;
      border-right: 1px solid rgba(11, 26, 46, 0.05);
    }

    .contact-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      background: white;
      border: 1px solid rgba(11, 26, 46, 0.08);
      border-radius: 60px;
      padding: 0.8rem 1.2rem;
      margin-bottom: 0.8rem;
      width: 100%;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
    }
    .contact-chip:hover {
      transform: translateX(5px);
      border-color: var(--brand-soft);
    }

    .contact-form {
      padding: 3rem 2rem;
    }

    .form-control, .form-select {
      border-radius: 16px;
      border: 1px solid rgba(11, 26, 46, 0.12);
      padding: 0.8rem 1.2rem;
      transition: var(--transition);
    }

    .form-control:focus, .form-select:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 4px var(--brand-soft);
      outline: none;
    }

    /* ===== GALERÍA (estilos mantenidos y mejorados) ===== */
    .gal-gallery {
      padding-bottom: 70px;
    }

    .gal-frame {
      height: clamp(250px, 55vh, 500px);
      background: #ffffff;
      border-radius: var(--radius-sm);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      border: 1px solid rgba(11, 26, 46, 0.05);
    }

    .gal-img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      cursor: zoom-in;
      transition: var(--transition);
    }

    .gal-gallery .carousel-control-prev,
    .gal-gallery .carousel-control-next {
      width: 56px;
      height: 56px;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(5px);
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      opacity: 1;
      border: 1px solid rgba(11, 26, 46, 0.1);
    }
    .gal-gallery .carousel-control-prev { left: 10px; }
    .gal-gallery .carousel-control-next { right: 10px; }

    .gal-gallery .carousel-control-prev-icon,
    .gal-gallery .carousel-control-next-icon {
      filter: invert(1) grayscale(1);
    }

    .gal-gallery .carousel-indicators {
      bottom: -50px;
    }
    .gal-gallery .carousel-indicators button {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--muted);
    }
    .gal-gallery .carousel-indicators button.active {
      background: var(--brand);
    }

    /* ===== ACCORDION ELEGANTE ===== */
    .accordion-item {
      border-radius: var(--radius-sm) !important;
      overflow: hidden;
      border: 1px solid rgba(11, 26, 46, 0.08);
      margin-bottom: 0.8rem;
      background: white;
    }

    .accordion-button {
      font-weight: 700;
      padding: 1.2rem 1.5rem;
      background: white;
      box-shadow: none !important;
    }

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

    .accordion-button:focus {
      border-color: var(--brand-soft);
      box-shadow: 0 0 0 4px var(--brand-soft);
    }

    .accordion-body {
      padding: 1.5rem;
      color: var(--muted);
    }

    /* ===== FOOTER PROFUNDO ===== */
    footer {
      background: linear-gradient(135deg, var(--brand-dark), #0b5a2a);
      color: rgba(255,255,255,0.95);
    }

    footer a {
      color: rgba(255,255,255,0.8);
      text-decoration: none;
      transition: var(--transition);
    }

    footer a:hover {
      color: white;
      text-decoration: underline;
    }

    .footer-mini {
      border-top: 1px solid rgba(255,255,255,0.15);
      padding-top: 1.5rem;
      margin-top: 1.5rem;
      font-size: 0.9rem;
    }

    /* ===== ANIMACIONES ===== */
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0px); }
    }

    .float-animation {
      animation: float 6s ease-in-out infinite;
    }

    .soft-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(11,26,46,0.1), transparent);
      margin: 1rem 0;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 991.98px) {
      .hero-right {
        border-left: 0;
        border-top: 1px solid rgba(11, 26, 46, 0.05);
      }
      .contact-side {
        border-right: 0;
        border-bottom: 1px solid rgba(11, 26, 46, 0.05);
      }
      .navbar-collapse {
        background: rgba(244, 250, 246, 0.95);
        backdrop-filter: blur(15px);
        border-radius: var(--radius-sm);
        padding: 1rem;
        margin-top: 0.5rem;
      }
    }

/* ===== INLINE <style> BLOCK #2 ===== */
/* Evita scroll horizontal por elementos que se pasan 1-2px (muy común en mobile) */
    html, body { overflow-x: hidden; }

    /* Mobile / Tablet: menú desplegable prolijo full-width dentro del flujo */
    @media (max-width: 991.98px){
      .navbar { padding: .6rem 0; }
      .navbar > .container { padding-left: 16px; padding-right: 16px; }

      /* El collapse se ve como panel sólido, sin “cajita rara” */
      .navbar-collapse{
        background: #f4faf6;                 /* sólido (sin blur) */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid rgba(11, 26, 46, 0.10);
        border-radius: 16px;
        box-shadow: 0 18px 45px rgba(11, 26, 46, 0.12);
        margin-top: .6rem;
        padding: .25rem 0;
      }

      .navbar-nav{
        align-items: stretch !important;
        gap: 0 !important;
      }
      .navbar-nav .nav-link{
        border-radius: 0 !important;
        padding: .85rem 1rem !important;
      }
      .navbar-nav .nav-link:hover{
        background: rgba(31, 157, 69, 0.10);
      }

      /* Botón WhatsApp ocupa ancho, se ve “CTA” y no desarma el layout */
      .navbar-nav .btn{
        width: calc(100% - 2rem);
        margin: .5rem 1rem .75rem;
        justify-content: center;
        display: inline-flex;
      }
    }

/* ===== INLINE <style> BLOCK #3 ===== */
:root{ --nav-h: 86px; }

    /* Anclas: que no queden tapadas por la navbar fixed */
    .anchor-offset{ scroll-margin-top: calc(var(--nav-h) + 12px); }

    /* Navbar un poco más “compacta” y consistente */
    .navbar{ min-height: var(--nav-h); }

    /* Menos hueco entre navbar y hero (antes: 140px) */
    .hero{
      padding-top: calc(var(--nav-h) + 22px);
      padding-bottom: 70px;
    }

    /* Secciones: más aire (evita “todo apretado”) */
    section{
      padding-top: 84px;
      padding-bottom: 84px;
    }
    .gal-gallery{ padding-bottom: 84px; } /* mantiene la galería prolija */

    /* Divisores: que no sumen altura de más */
    .soft-divider{ margin: 0; }

    /* HERO: grid para controlar orden (desktop vs phone) */
    .hero-grid{
      display: grid;
      gap: 1.75rem;
      align-items: start;
    }
    @media (min-width: 992px){
      .hero-grid{
        grid-template-columns: 1.25fr 0.75fr;
        align-items: center;
      }
      .hero-media-wrap{
        justify-content: center;
        align-items: center;
      }
    }

    .hero-p{
      color: var(--muted);
      max-width: 62ch;
      margin-bottom: 1rem;
    }

    .hero-media-wrap{
      display: flex;
      justify-content: center;
    }
    .hero-media-img{
      width: min(560px, 100%);
      height: auto;
      object-fit: contain;
    }

    /* Phone: padding más chico y mantiene jerarquía visual */
    @media (max-width: 991.98px){
      :root{ --nav-h: 74px; }

      section{ padding-top: 70px; padding-bottom: 70px; }
      .hero{ padding-top: calc(var(--nav-h) + 14px); padding-bottom: 56px; }

      .hero-left{ padding: 1.6rem; }
      .hero-list{ margin-top: 1.15rem; }
      .hero-media-wrap{ margin-top: .75rem; margin-bottom: .25rem; }
    }

/* ===== INLINE <style> BLOCK #4 ===== */
/* ===== WhatsApp Float (scope wa-*) ===== */
.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  font-family:inherit;
}

/* Botón verde oficial WhatsApp */
.wa-btn{
  width:60px;height:60px;border-radius:50%;
  border:none;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  display:grid;place-items:center;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .25s, box-shadow .25s;
}
.wa-btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 36px rgba(37,211,102,.55);
}

/* Card */
.wa-card{
  position:absolute;
  right:0;
  bottom:74px;
  width:min(360px,92vw);
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  overflow:hidden;
  transform:translateY(10px);
  opacity:0;
  transition:.25s;
}
.wa-card[aria-modal="true"]{ transform:none; opacity:1; }

/* Header: usa --brand si existe (tu verde del sitio) */
.wa-head{
  display:flex;align-items:center;gap:12px;
  padding:14px;
  background:linear-gradient(135deg, var(--brand, #1f9d45), var(--brand-2, #0f7a33));
  color:#fff;
}
.wa-avatar{
  width:40px;height:40px;
  background:#fff;
  border-radius:10px;
  display:grid;place-items:center;
  overflow:hidden;
}
.wa-avatar img{ width:26px;height:26px;object-fit:contain;display:block; }

.wa-title{ font-weight:800; letter-spacing:-0.01em; }
.wa-status{ font-size:.85rem; opacity:.92; }

.wa-close{
  margin-left:auto;
  border:none;background:transparent;color:#fff;
  font-size:24px;line-height:1;
  cursor:pointer;
}

/* Body bubbles */
.wa-body{
  padding:14px;
  max-height:40vh;
  overflow:auto;
  background:#f8fafc;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.wa-bubble{
  max-width:88%;
  padding:10px 12px;
  border-radius:14px;
  font-size:.95rem;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.wa-bot{
  background:#ffffff;
  border:1px solid rgba(15,23,42,.10);
  align-self:flex-start;
}
.wa-user{
  background:#eafff2;
  border:1px solid rgba(31,157,69,.25);
  align-self:flex-end;
}

/* Composer */
.wa-compose{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:10px;
  border-top:1px solid rgba(15,23,42,.10);
  background:#fff;
}
.wa-compose textarea{
  resize:none;
  border-radius:12px;
  padding:10px;
  border:1px solid rgba(15,23,42,.14);
  font-family:inherit;
  outline:none;
}
.wa-compose textarea:focus{
  border-color: rgba(31,157,69,.55);
  box-shadow: 0 0 0 .18rem rgba(31,157,69,.25);
}
.wa-send{
  background: var(--brand, #1f9d45);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:0 16px;
  cursor:pointer;
}
.wa-send:hover{ background: var(--brand-2, #0f7a33); }

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

      

{
    "template": "aguaquerika.com.ar/index.html",
    "template_mtime": 1771590498,
    "template_mtime_human": "2026-02-20T12:28:18+00:00",
    "css_links_found": [
        "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
        "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap",
        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    ],
    "css_links_external": [
        "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
        "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap",
        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    ],
    "css_links_embedded": [],
    "inline_style_blocks": 4,
    "inline_imports_external": [],
    "inline_imports_embedded": [],
    "missing_css_files": []
}