:root{
  --secondary: #2E3192;
  --tertiary:  #F7931E;
  --bg: #FFFFFF;
  --muted:#666D79;
  --card:#F8F9FB;
  --secondary1: #F7931E;
  --radius:12px;
  --font: "Arial Rounded MT Bold", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container:1100px;
}

/* Contenedor del logo inndibot */
.logo {
  display: flex;
  align-items: center;   /* centra verticalmente */
  gap: 8px;              /* espacio entre imagen y texto */
  text-decoration: none; /* quita subrayado */
}

/* Imagen circular inndibot */
.logo-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

/* Texto del logo */
.logo-text {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--tertiary);
}

/* Reset simple */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:#0f172a;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top: 60px; /* igual a la altura del header */
}

.h1-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Container */
.container{max-width:var(--container);margin:0 auto;padding:0 1rem}

/* Header */
.site-header {background:var(--secondary);color:#fff;position:fixed;top:0;left:0;width:100%;z-index:80;box-shadow:0 1px 0 rgba(15,23,42,0.06);}
.header-grid{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.logo{font-weight:700;color:#fff;text-decoration:none;font-size:1.125rem}
.nav{display:flex;align-items:center;gap:1rem}
.nav-list{display:flex;gap:1rem;list-style:none;padding:0;margin:0;align-items:center}
.nav-list a{color:#fff;text-decoration:none;padding:.55rem .6rem;border-radius:8px;transition:background .18s,color .18s}
.nav-list a:hover,.nav-list a:focus{background:rgba(255,255,255,0.06);color:var(--tertiary)}
.btn-outline{border:1px solid rgba(255,255,255,0.15);color:#fff;padding:.45rem .75rem;border-radius:8px;text-decoration:none}

/* Menu toggle (mobile) */
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;padding:.25rem}

/* HERO */
.hero{padding:3.25rem 0;background:linear-gradient(135deg,var(--secondary),var(--tertiary));color:#fff}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.hero-copy h1{font-size:clamp(1.9rem,3.5vw,2.6rem);margin:0 0 .5rem}
.kicker{margin:0 0 1rem;color:rgba(255,255,255,0.95)}
.hero-ctas{display:flex;gap:.75rem;flex-wrap:wrap}
.btn-primary{background:var(--tertiary);color:var(--secondary);border-radius:10px;padding:.8rem 1.2rem;text-decoration:none;font-weight:700;display:inline-block;transition:transform .18s,box-shadow .18s}
.btn-primary:hover,.btn-primary:focus{transform:translateY(-3px);box-shadow:0 8px 20px rgba(14,22,59,0.12)}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,0.18);color:#fff;padding:.6rem 1rem;border-radius:10px;text-decoration:none}

/* HERO SLIDER */
.hero-slider { position:relative; overflow:hidden; }
.slider-container { position:relative; }
.slide { display:none; position:relative; }
.slide.active { display:block; animation:fade 1s ease-in-out; }
.slide img { width:100%; border-radius:var(--radius); }
.slide-caption {
  position:absolute; bottom:20%; left:10%;
  background:rgba(46,49,146,0.7); color:#fff; padding:1rem;
  border-radius:10px; max-width:400px;
}
.prev, .next {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.4); color:#fff; border:0;
  padding:.5rem .8rem; cursor:pointer; font-size:1.5rem;
}
.prev { left:10px; }
.next { right:10px; }

@keyframes fade { from{opacity:.4} to{opacity:1} }


/* Sections */
.section{padding:3rem 0}
.section-header{margin-bottom:1.25rem}
.section-header h2{margin:0;font-size:1.5rem}
.section-sub{color:var(--muted);margin:.5rem 0 0}

/* SERVICES GRID */
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:1rem}
.service-card{background:var(--card);padding:1.25rem;border-radius:var(--radius);box-shadow:0 6px 18px rgba(14,22,59,0.04);transition:transform .18s,box-shadow .18s}
.service-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(14,22,59,0.08)}
.service-card h3{margin-top:0}
.service-card .muted{color:var(--muted);margin:.4rem 0 1rem}
.service-card ul{margin:0;padding-left:1.05rem;color:#172033}
.link-more{display:inline-block;margin-top:1rem;color:var(--secondary);text-decoration:none;font-weight:700}

/* PRODUCTS GRID */
.products-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:1rem}
.product-card{background:#fff;padding:1.25rem;border-radius:var(--radius);border:1px solid #eef2f7;transition:transform .18s}
.product-card:hover{transform:translateY(-6px)}
.product-card .muted{color:var(--muted);margin:.4rem 0}
.product-ctas{display:flex;gap:.5rem;margin-top:1rem}
.btn-small{background:var(--secondary);color:#fff;padding:.5rem .85rem;border-radius:8px;text-decoration:none;font-weight:700}
.btn-outline{background:var(--tertiary);border:1px solid var(--secondary);color:var(--secondary);padding:.45rem .75rem;border-radius:8px;text-decoration:none}

/* Chips */
.chips{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}
.chip{background:#fff;border:1px solid #e9eef7;padding:.45rem .7rem;border-radius:999px;text-decoration:none;color:var(--secondary)}

/* CASES */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.case-card{background:linear-gradient(180deg,#fff,#fbfdff);padding:1rem;border-radius:10px;border:1px solid #eef2f7}

/* FOOTER */
.site-footer{background:#091028;color:#dbe6ff;padding:2rem 0;margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:start}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links a{color:#dbe6ff;text-decoration:none}

/* Cookie banner */
.cookie-banner{position:fixed;bottom:1rem;left:1rem;right:1rem;background:var(--secondary);color:#fff;padding:1rem;border-radius:10px;display:flex;justify-content:space-between;align-items:center;gap:1rem;box-shadow:0 10px 30px rgba(46,49,146,0.12)}
.cookie-actions{display:flex;gap:.5rem}

/* Responsive */
@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .nav-list{display:none;position:absolute;top:64px;right:1rem;background:var(--secondary);flex-direction:column;padding:1rem;border-radius:10px}
  .nav-list.active{display:flex}
  .menu-toggle{display:inline-block}
  .products-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cookie-banner{left:0;right:0;border-radius:0}
}

/* Accessibility focus */
a:focus, button:focus, .link-more:focus{outline:3px solid rgba(46,49,146,0.18);outline-offset:3px}

/* CONTACT FORM */
.contact-form-section{max-width:600px;margin:3rem auto;padding:2rem;background:var(--card);border-radius:var(--radius)}
.contact-form-section form{display:flex;flex-direction:column;gap:1rem}
.contact-form-section label{font-weight:600}
.contact-form-section input,
.contact-form-section textarea{padding:.6rem;border:1px solid #ddd;border-radius:var(--radius);font:inherit}
.contact-form-section button{align-self:flex-start}

  /* Loader de puercoespines */
  .loader {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
  }

  .porcupine {
    width: 20px;
    height: 20px;
    background: #ff7b54;
    border-radius: 50%;
    box-shadow: 5px 0px #ffb347, -5px 0px #ffb347;
    animation: bounce 0.6s infinite alternate;
  }

  .porcupine:nth-child(2) {
    animation-delay: 0.2s;
    background: #ffb347;
  }

  .porcupine:nth-child(3) {
    animation-delay: 0.4s;
    background: #ffd56b;
  }

  @keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
  }

  /* Mensajes */
  #form-message {
    display: none;
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
  }

  #form-message.success { background: #d4f8d4; color: #2e7d32; }
  #form-message.error { background: #ffd6d6; color: #c62828; }


  /* ===================== */
/* HERO RESPONSIVE       */
/* ===================== */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr; /* Una sola columna */
    text-align: center;
    gap: 1.5rem;
  }

  .hero-copy h1 {
    font-size: clamp(1.8rem, 5vw, 2.4rem);
  }

  .kicker {
    font-size: 1rem;
  }

  .hero-ctas {
    justify-content: center;
  }

  .slide-caption {
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 2rem 0.5rem;
  }

    .hero-slider {
    min-height: 400px; /* 👈 más altura al banner en móviles */
  }

  .slide img {
    min-height: 400px;   /* 👈 asegura que la imagen crezca */
    object-fit: cover;   /* mantiene proporción y llena el espacio */
    
  }

  .hero-copy h1 {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .kicker {
    font-size: 0.95rem;
  }

  .btn-primary, .btn-ghost {
    width: 100%;
    text-align: center;
    padding: 0.9rem 1rem;
  }

  .hero-ctas {
    flex-direction: column;
    gap: 1rem;
  }

  .slide-caption {
    font-size: 0.9rem;
    padding: 0.8rem;
    bottom: 10%;
  }

  .prev, .next {
    font-size: 1.2rem;
    padding: 0.4rem 0.6rem;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 2rem 0.5rem;
  }

    .hero-slider {
    min-height: 400px; /* 👈 más altura al banner en móviles */
  }

  .slide img {
    content: url("/assets/images/banner_movil.webp");
    min-height: 400px;   /* 👈 asegura que la imagen crezca */
    object-fit: cover;   /* mantiene proporción y llena el espacio */
  }
  
  .hero-copy h1 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .kicker {
    font-size: 0.85rem;
  }

  .btn-primary, .btn-ghost {
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
  }

  .slide-caption {
    font-size: 0.8rem;
    padding: 0.6rem;
    bottom: 8%;
    max-width: 90%;
  }

  .prev, .next {
    font-size: 1rem;
    padding: 0.3rem 0.5rem;
  }
}

/* Footer Styles */
footer {
    font-family: Arial, sans-serif;
    text-align: center;
  }

  footer ul li {
    margin-bottom: 10px;
  }

  footer ul li a:hover {
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    footer div {
      flex: 100%;
      text-align: center;
    }

    footer ul {
      text-align: left;
      display: inline-block;
    }

    footer div:last-child {
      margin-top: 20px;
    }
  }