/* =====================================================================
   Marca Chullachaqui Publicidad en la web institucional (la misma de la
   tienda y del panel). Va DESPUÉS de main.css: la plantilla se maneja con
   variables CSS, así que casi todo se resuelve cambiándolas acá.
   Azul marino #0b2559 / #123a85, azul #1466d6, azul vivo #1e88f0.
   ===================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --default-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --heading-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --nav-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --background-color: #ffffff;
  --default-color: #47566f;
  --heading-color: #0b2559;
  --accent-color: #1466d6;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;

  --nav-color: #ffffff;
  --nav-hover-color: #8cc4ff;
  --nav-dropdown-color: #0f1e3a;
  --nav-dropdown-hover-color: #1466d6;

  --marino: #0b2559;
  --marino-2: #123a85;
  --azul-vivo: #1e88f0;
  --azul-claro: #8cc4ff;
  --tinte: #eaf2fd;
}

.light-background { --background-color: #f6f9fd; --surface-color: #ffffff; }
.dark-background {
  --background-color: #0b2559;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #123a85;
  --contrast-color: #ffffff;
}

h1, h2, h3, h4, h5, h6 { font-weight: 800; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- Cabecera */
/* Siempre azul marino: el logo real es blanco con resplandor y no se lee
   sobre la foto clara del héroe. */
.header, .index-page .header, .index-page.scrolled .header {
  --background-color: transparent;
  background: linear-gradient(90deg, var(--marino) 0%, var(--marino-2) 100%) !important;
  box-shadow: 0 6px 24px rgba(11, 37, 89, .25);
  padding: 10px 0;
}
.header .logo img { max-height: 54px; filter: drop-shadow(0 0 10px rgba(30, 136, 240, .45)); }
.navmenu a, .navmenu a:focus { font-weight: 600; }
@media (min-width: 1200px) {
  .navmenu > ul > li > a.active, .navmenu > ul > li > a:hover { color: #fff; }
  .navmenu > ul > li > a.active::before, .navmenu > ul > li > a:hover::before { background: var(--azul-vivo); }
}
.header .btn-getstarted, .header .btn-getstarted:focus {
  background: var(--accent-color); border-radius: 999px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(20, 102, 214, .35);
}
.header .btn-getstarted:hover { background: var(--azul-vivo); }

/* ---------------------------------------------------------------- Héroe */
/* El collage de trabajos reales queda, teñido de azul marino con el brillo
   del logo arriba a la derecha (igual que la tienda). */
.hero.dark-background {
  background:
    radial-gradient(55% 80% at 85% 10%, rgba(30, 136, 240, .45), transparent 70%),
    linear-gradient(110deg, var(--marino) 0%, var(--marino-2) 100%);
}
.hero h1 { font-weight: 800; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1.08; }
.hero p { font-weight: 500; }
.hero .bi-check2-circle { color: var(--azul-claro); }
/* El botón principal de la plantilla solo tenía estilo dentro del héroe:
   en la banda final ("Escríbenos hoy") quedaba como texto azul sobre azul. */
.btn-get-started {
  display: inline-flex; align-items: center; padding: 10px 28px;
  color: #fff !important; background: var(--accent-color); border-radius: 999px; font-weight: 700;
  box-shadow: 0 10px 24px rgba(20, 102, 214, .4); transition: background .2s, transform .2s;
}
.btn-get-started:hover { background: var(--azul-vivo); transform: translateY(-2px); }
.btn-outline-light { border-radius: 999px; font-weight: 600; }
.hero .card.bg-dark {
  background: rgba(11, 37, 89, .78) !important;
  border: 1px solid rgba(140, 196, 255, .25) !important;
  border-radius: 18px; backdrop-filter: blur(6px);
  box-shadow: 0 30px 70px rgba(11, 37, 89, .45);
}
.hero .card .bi-lightning-charge { color: var(--azul-claro); }

/* ---------------------------------------------------------------- Secciones */
.section-title h2 { font-weight: 800; letter-spacing: -.01em; }
.section-title h2::after { background: var(--azul-vivo); height: 3px; border-radius: 3px; }
.section-title p { color: var(--accent-color); font-weight: 600; }

/* Tarjetas, fotos y formulario: bordes redondeados como la tienda */
.services .service-item { border-radius: 16px; border: 1px solid #dde6f3; transition: transform .25s, box-shadow .25s, border-color .25s; }
.services .service-item:hover { transform: translateY(-4px); border-color: #b9d3f3; }
.portfolio .portfolio-item img, .portfolio-content img { border-radius: 14px; }
.contact .info-wrap, .contact .php-email-form { border-radius: 16px; }
.contact .php-email-form input, .contact .php-email-form textarea, .form-control { border-radius: 10px !important; }
.contact .php-email-form input:focus, .contact .php-email-form textarea:focus, .form-control:focus {
  border-color: var(--azul-vivo); box-shadow: 0 0 0 3px rgba(30, 136, 240, .18);
}

/* Botones de Bootstrap que usa la plantilla */
.btn { border-radius: 999px; }
.btn-primary { background: var(--accent-color); border-color: var(--accent-color); }
.btn-primary:hover, .btn-primary:focus { background: var(--marino); border-color: var(--marino); }

/* ---------------------------------------------------------------- Pie */
.footer {
  --background-color: #0a1f4a;
  --default-color: rgba(255, 255, 255, .8);
  --heading-color: #8cc4ff;
  --surface-color: #123a85;
}
.footer a { color: rgba(255, 255, 255, .85); }
.footer a:hover { color: #fff; }
.footer .copyright { border-top-color: rgba(255, 255, 255, .12); }

/* Botón "volver arriba" */
.scroll-top { background-color: var(--accent-color); border-radius: 50%; }
.scroll-top:hover { background-color: var(--azul-vivo); }

/* Filtros del portafolio como chips (igual que los de la tienda y el panel) */
.portfolio .portfolio-filters li {
  padding: 7px 16px; margin: 0 4px 8px; border-radius: 999px; font-weight: 600;
  border: 1px solid #dde6f3; background: #fff; color: #47566f;
}
.portfolio .portfolio-filters li:hover { color: var(--accent-color); border-color: #b9d3f3; }
.portfolio .portfolio-filters li.filter-active { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }