/* Diseños de los sitios de ventanas. Cada sitio escoge uno con "tema" en site.json (<body class="tema-...">).
   Siguen el estilo de los sitios de ventanas mejor posicionados (estructura, colores, letras), con
   nuestra marca, nuestros textos y fotos con licencia. Va después de tema-claro.css.
   - gd:    franja azul marino, foto grande con título blanco, formulario debajo, botones rojos (Inter).
   - shark: encabezado casi negro, foto oscura con el formulario a la derecha, azul brillante (Squada One).
   - rm:    foto con tinte azul rey y título grande blanco, secciones gris-azul claro (Montserrat).
   - ww:    mitad panel azul oscuro con el texto y el formulario, mitad foto de casa, botones celestes (Montserrat). */

/* ---------- Común ---------- */
/* El formulario (styles.css) usa estas variables; se recalculan con los colores de cada tema. */
body[class*="tema-"] {
  --green-900: var(--vc-navy); --green-700: var(--vc-sky); --green-500: var(--vc-sky); --green-100: var(--vc-sky-light);
  --earth: var(--vc-sun); --earth-dark: var(--vc-sun-dark); --ink: var(--vc-text); --muted: var(--vc-muted);
}
.tema-gd .vc-hero .vc-trust .ic, .tema-shark .vc-hero .vc-trust .ic, .tema-rm .vc-hero .vc-trust .ic,
.tema-ww .vc-hero .vc-trust .ic { color: #fff; }
.tema-gd .vc-hero .vc-trust .ic { color: #ff5a73; }
.vc-topbar { display: none; }
.vc-hero { position: relative; overflow: hidden; }
.vc-hero-img { display: none; }
.vc .vc-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.vc-hero-text { max-width: 680px; }
.vc-hero-form { background: #fff; color: var(--vc-text); border-radius: 14px; padding: 24px 24px 0; box-shadow: 0 18px 50px rgba(0, 0, 0, .22); overflow: hidden; }
.vc .vc-form-title { font-size: 1.45rem; margin: 0 0 6px; }
.vc-form-lead { font-size: .95rem; line-height: 1.45; margin: 0 0 14px; color: var(--vc-muted); }
.vc-callbox { display: flex; gap: 12px; align-items: center; margin: 18px -24px 0; padding: 16px 24px; background: var(--vc-sky); color: #fff; }
.vc-callbox strong { display: block; font-size: 1.1rem; }
.vc-callbox span { font-size: .92rem; }
.vc-callbox .ic { width: 30px; height: 30px; color: #fff; }
.vc .vc-card-photo { padding: 0; overflow: hidden; }
.vc-card-img { display: block; width: 100%; height: 170px; object-fit: cover; }
.vc-card-photo .vc-ic { display: none; }
.vc-card-photo h3 { margin: 16px 20px 6px; }
.vc-card-photo p { margin: 0 20px 20px; }
@media (max-width: 960px) { .vc .vc-hero-grid { grid-template-columns: 1fr; } }

/* Foto de fondo con capa oscura (gd, shark, rm) */
.tema-gd .vc-hero-img, .tema-shark .vc-hero-img, .tema-rm .vc-hero-img {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.tema-gd .vc-hero::after, .tema-shark .vc-hero::after, .tema-rm .vc-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tema-gd .vc-hero > .wrap, .tema-shark .vc-hero > .wrap, .tema-rm .vc-hero > .wrap { position: relative; z-index: 2; }
.tema-gd .vc-hero-text, .tema-shark .vc-hero-text, .tema-rm .vc-hero-text,
.tema-gd .vc-hero-text h1, .tema-shark .vc-hero-text h1, .tema-rm .vc-hero-text h1,
.tema-gd .vc-hero-text .vc-lead, .tema-shark .vc-hero-text .vc-lead, .tema-rm .vc-hero-text .vc-lead,
.tema-gd .vc-hero-text .vc-eyebrow, .tema-shark .vc-hero-text .vc-eyebrow, .tema-rm .vc-hero-text .vc-eyebrow,
.tema-gd .vc-hero .vc-trust, .tema-shark .vc-hero .vc-trust, .tema-rm .vc-hero .vc-trust { color: #fff; }

/* ---------- gd: azul marino #1B3554, rojo #E4002B, azul profundo #06038D, celeste #EFF7FD, Inter ---------- */
.tema-gd {
  --vc-navy: #1B3554; --vc-text: #111827; --vc-muted: #4b5563; --vc-sky: #06038D; --vc-sky-dark: #04026a;
  --vc-sky-light: #EFF7FD; --vc-sun: #E4002B; --vc-sun-dark: #b80022; --vc-sun-soft: #fdeaee; --vc-line: #dbe3ee; --vc-radius: 10px;
}
body.tema-gd { font-family: "Inter", system-ui, sans-serif; }
.tema-gd h1, .tema-gd h2, .tema-gd h3, .tema-gd .vc-logo { font-family: "Inter", system-ui, sans-serif; font-weight: 800; }
.tema-gd .vc-topbar { display: block; background: #1B3554; color: #fff; font-size: .85rem; font-weight: 600; padding: 7px 0; }
.tema-gd a.vc-btn-sun, .tema-gd .vc-btn-sun, .tema-gd.vc .btn { color: #fff; border-radius: 8px; }
.tema-gd .vc-btn { border-radius: 8px; }
.tema-gd .vc-hero { padding: 72px 0 56px; }
.tema-gd .vc-hero::after { background: linear-gradient(90deg, rgba(14, 24, 42, .82) 0%, rgba(14, 24, 42, .55) 55%, rgba(14, 24, 42, .25) 100%); }
.tema-gd .vc-hero-text h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.tema-gd .vc .vc-hero-grid, .tema-gd .vc-hero-grid { grid-template-columns: 1fr; gap: 32px; }
.tema-gd .vc-hero-form { max-width: 960px; border-top: 6px solid #1B3554; }
.tema-gd .vc-form-title { color: #06038D; }
.tema-gd .vc-callbox { background: #EFF7FD; color: #06038D; }
.tema-gd .vc-callbox .ic { color: #E4002B; }
.tema-gd .vc-section-soft { background: #EFF7FD; }
.tema-gd .vc-winter { background: #1B3554; }
.tema-gd .vc-urgent { background: #1B3554; color: #fff; }
.tema-gd .vc-urgent h2 { color: #fff; }
.tema-gd .vc-footer { background: #1B3554; }

/* ---------- shark: #191919, azul #1A9DEF, celeste #96CDEF, gris #404E5C, Squada One ---------- */
.tema-shark {
  --vc-navy: #191919; --vc-text: #404E5C; --vc-muted: #5d6b78; --vc-sky: #1A9DEF; --vc-sky-dark: #0f86d1;
  --vc-sky-light: #e8f5fd; --vc-sun: #1A9DEF; --vc-sun-dark: #0f86d1; --vc-line: #dfe3e8; --vc-radius: 6px;
}
body.tema-shark { font-family: Verdana, "Segoe UI", system-ui, sans-serif; font-size: 17px; background: #f2f3f5; }
.tema-shark h1, .tema-shark h2, .tema-shark .vc-logo { font-family: "Squada One", "Inter", sans-serif; font-weight: 400; letter-spacing: .01em; }
.tema-shark h1 { font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: 1; }
.tema-shark h3 { font-family: "Inter", system-ui, sans-serif; font-weight: 700; color: #191919; }
.tema-shark .vc-header { background: #191919; border-bottom-color: #191919; }
.tema-shark .vc-nav > a:not(.vc-btn), .tema-shark a.vc-logo, .tema-shark .vc-logo-mark { color: #fff; }
.tema-shark .lang-toggle { background: #191919; color: #fff; border-color: #444; }
.tema-shark .lang-toggle [aria-current] { color: #96CDEF; }
.tema-shark .vc-header a.vc-btn-sun { background: #96CDEF; color: #fff; }
.tema-shark a.vc-btn-sun, .tema-shark .vc-btn-sun, .tema-shark.vc .btn { color: #fff; border-radius: 6px; }
.tema-shark .vc-hero { padding: 64px 0; }
.tema-shark .vc-hero::after { background: rgba(10, 12, 14, .62); }
.tema-shark .vc-hero .vc-hero-cta { background: #fff; color: #404E5C; border-radius: 999px; text-transform: uppercase; font-weight: 500; letter-spacing: .02em; }
.tema-shark .vc-hero-form { border-radius: 0; padding-top: 28px; }
.tema-shark .vc-form-title { font-family: "Inter", sans-serif; font-weight: 700; text-transform: uppercase; color: #404E5C; font-size: 1.25rem; border-top: 4px solid #96CDEF; padding-top: 12px; display: inline-block; }
.tema-shark .vc-callbox { background: #1A9DEF; }
.tema-shark .vc-callbox strong { font-family: "Squada One", sans-serif; font-size: 1.6rem; font-weight: 400; text-transform: uppercase; }
.tema-shark .vc-section { background: #fff; }
.tema-shark .vc-section-soft { background: #f2f3f5; }
.tema-shark .vc-winter { background: #191919; }
.tema-shark .vc-urgent { background: #1A9DEF; color: #fff; }
.tema-shark .vc-urgent h2 { color: #fff; }
.tema-shark .vc-footer { background: #191919; }

/* ---------- rm: azul rey #1565C0 sobre la foto, gris-azul #F3F8FB, Montserrat ---------- */
.tema-rm {
  --vc-navy: #0d2d57; --vc-text: #1b1b1b; --vc-muted: #4f5b66; --vc-sky: #1565C0; --vc-sky-dark: #0f4f99;
  --vc-sky-light: #F3F8FB; --vc-sun: #1565C0; --vc-sun-dark: #0f4f99; --vc-line: #dce6ef; --vc-radius: 4px;
}
body.tema-rm { font-family: "Montserrat", system-ui, sans-serif; }
.tema-rm h1, .tema-rm h2, .tema-rm h3, .tema-rm .vc-logo { font-family: "Montserrat", system-ui, sans-serif; letter-spacing: 0; }
.tema-rm h1 { font-weight: 500; font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.1; }
.tema-rm h2 { font-weight: 500; }
.tema-rm h3 { font-weight: 600; }
.tema-rm a.vc-btn-sun, .tema-rm .vc-btn-sun, .tema-rm.vc .btn { color: #fff; border-radius: 4px; }
.tema-rm .vc-btn { border-radius: 4px; }
.tema-rm .vc-hero { padding: 96px 0 64px; }
.tema-rm .vc-hero::after { background: linear-gradient(90deg, rgba(21, 101, 192, .92) 0%, rgba(21, 101, 192, .72) 50%, rgba(21, 101, 192, .35) 100%); }
.tema-rm .vc-hero-text .vc-eyebrow { font-weight: 600; letter-spacing: .12em; }
.tema-rm .vc-hero-form { border-radius: 4px; }
.tema-rm .vc-callbox { background: #F3F8FB; color: #1565C0; }
.tema-rm .vc-callbox .ic { color: #1565C0; }
.tema-rm .vc-section-soft, .tema-rm .vc-section:nth-of-type(even) { background: #F3F8FB; }
.tema-rm .vc-section.vc-winter { background: #1565C0; }
.tema-rm .vc-card { border-radius: 4px; box-shadow: 0 2px 12px rgba(13, 45, 87, .08); }
.tema-rm .vc-urgent { background: #1565C0; color: #fff; }
.tema-rm .vc-urgent h2 { color: #fff; }

/* ---------- ww: panel #1A4982, foto de casa a la derecha, botones #00A6DE, texto #444444, Montserrat ---------- */
.tema-ww {
  --vc-navy: #1A4982; --vc-text: #444444; --vc-muted: #666; --vc-sky: #00A6DE; --vc-sky-dark: #008dbd;
  --vc-sky-light: #f4f5f7; --vc-sun: #00A6DE; --vc-sun-dark: #008dbd; --vc-line: #e1e4e8; --vc-radius: 4px;
}
body.tema-ww { font-family: "Montserrat", system-ui, sans-serif; }
.tema-ww h1, .tema-ww h2, .tema-ww h3, .tema-ww .vc-logo { font-family: "Montserrat", system-ui, sans-serif; letter-spacing: 0; }
.tema-ww h1 { font-weight: 500; font-size: clamp(2.2rem, 4.4vw, 3.3rem); line-height: 1.12; }
.tema-ww h2 { font-weight: 500; }
.tema-ww .vc-header { border-top: 3px solid #00A6DE; }
.tema-ww a.vc-btn-sun, .tema-ww .vc-btn-sun, .tema-ww.vc .btn { color: #fff; border-radius: 4px; }
.tema-ww .vc-btn { border-radius: 4px; }
.tema-ww .vc-hero { background: #1A4982; }
.tema-ww .vc-hero-img { display: block; position: absolute; top: 0; right: 0; width: 50%; height: 860px; object-fit: cover; object-position: 50% 80%; }
.tema-ww .vc .vc-hero-grid, .tema-ww .vc-hero-grid { grid-template-columns: 1fr 1fr; gap: 0; }
.tema-ww .vc-hero-text, .tema-ww .vc-hero-form { grid-column: 1; }
.tema-ww .vc-hero-text { padding: 64px 48px 28px 0; color: #fff; }
.tema-ww .vc-hero-text h1, .tema-ww .vc-hero-text .vc-lead, .tema-ww .vc-hero-text .vc-eyebrow, .tema-ww .vc-hero .vc-trust { color: #fff; }
.tema-ww .vc-hero-form { margin: 0 48px 56px 0; border-radius: 4px; }
.tema-ww .vc-callbox { background: #f4f5f7; color: #1A4982; }
.tema-ww .vc-callbox .ic { color: #00A6DE; }
.tema-ww .vc-section-soft { background: #f4f5f7; }
.tema-ww .vc-winter { background: #1A4982; }
.tema-ww .vc-card { border-radius: 4px; }
.tema-ww .vc-urgent { background: #1A4982; color: #fff; }
.tema-ww .vc-urgent h2 { color: #fff; }
.tema-ww .vc-footer { background: #1A4982; }
@media (max-width: 960px) {
  .tema-ww .vc-hero-img { position: static; width: 100%; height: 260px; }
  .tema-ww .vc-hero-text, .tema-ww .vc-hero-form { padding-right: 0; margin-right: 0; }
}