/* ============================================
   KUARSO — Home CSS v2.0
   Estética editorial/industrial (misma que landings)
   ============================================ */

/* ---- VARIABLES DE COLOR (mismas que landings) ---- */
:root {
  --kuarso-red: #E63312 !important;
  --kuarso-red-dark: #B8260A;
  --paper: #F5F1E8;
  --paper-warm: #EFE8D6;
  --ink: #1A1815;
  --ink-soft: #2B2823;
  --steel: #4A4640;
  --line: rgba(26, 24, 21, 0.15);
  --line-strong: rgba(26, 24, 21, 0.35);

  /* Override variables del tema TT4 */
  --wp--preset--color--base: #F5F1E8 !important;
  --wp--preset--color--base-2: #EFE8D6 !important;
  --wp--preset--color--contrast: #1A1815 !important;
  --wp--preset--color--contrast-2: #4A4640 !important;
  --wp--preset--color--accent-3: #E63312 !important;
}


/* ---- FONDO + TEXTURA PAPEL ---- */
body,
html {
  background-color: var(--paper) !important;
}

.wp-site-blocks {
  background-color: var(--paper) !important;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(230, 51, 18, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(122, 24, 5, 0.03) 0%, transparent 50%);
}

/* Secciones sin color propio: transparente */
.wp-block-group:not([class*="has-accent"]):not([class*="has-contrast"]):not([class*="has-luminous"]):not([class*="has-vivid"]):not([class*="has-cyan"]):not([class*="has-pale"]),
.wp-block-cover:not([class*="has-accent"]):not([class*="has-contrast"]),
.wp-block-columns:not([class*="has-accent"]):not([class*="has-contrast"]) {
  background-color: transparent !important;
}

/* Preservar secciones con fondos de color intencionales */
.has-accent-3-background-color {
  background-color: var(--kuarso-red) !important;
}

.has-contrast-background-color {
  background-color: var(--ink) !important;
}

.has-base-2-background-color {
  background-color: var(--paper-warm) !important;
}


/* ---- TIPOGRAFÍA GLOBAL (solo páginas del tema, NO landings) ---- */
body:not(.landing-colombia),
body:not(.landing-colombia) .wp-site-blocks {
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--ink) !important;
  font-size: 17px;
  line-height: 1.6;
}

/* Headings → Bebas Neue (solo tema) */
body:not(.landing-colombia) h1,
body:not(.landing-colombia) h2,
body:not(.landing-colombia) h3,
body:not(.landing-colombia) .wp-block-heading {
  font-family: 'Bebas Neue', Impact, sans-serif !important;
  letter-spacing: 0.01em;
  line-height: 1 !important;
  color: var(--ink) !important;
}

body:not(.landing-colombia) h1 {
  font-size: clamp(48px, 7vw, 80px) !important;
  line-height: 0.92 !important;
}

body:not(.landing-colombia) h2 {
  font-size: clamp(36px, 5vw, 60px) !important;
  margin-bottom: 24px;
}

body:not(.landing-colombia) h3 {
  font-size: clamp(24px, 3vw, 36px) !important;
}

body:not(.landing-colombia) h4,
body:not(.landing-colombia) h5,
body:not(.landing-colombia) h6 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  line-height: 1.1 !important;
}

/* Párrafos (solo tema) */
body:not(.landing-colombia) p,
body:not(.landing-colombia) li,
body:not(.landing-colombia) .wp-block-paragraph {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(15px, 1.8vw, 17px) !important;
  line-height: 1.6 !important;
  color: var(--ink-soft) !important;
}

/* Texto accent en headings (solo tema) */
body:not(.landing-colombia) h1 strong,
body:not(.landing-colombia) h2 strong,
body:not(.landing-colombia) h3 strong,
body:not(.landing-colombia) h1 em,
body:not(.landing-colombia) h2 em,
body:not(.landing-colombia) h3 em {
  color: var(--kuarso-red) !important;
}

/* Labels y etiquetas mono (solo tema) */
body:not(.landing-colombia) .wp-block-details summary,
body:not(.landing-colombia) figcaption {
  font-family: 'JetBrains Mono', monospace !important;
}


/* ---- CONTENEDOR PRINCIPAL ---- */
.wp-site-blocks {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

.wp-site-blocks > .wp-block-group,
.wp-site-blocks > .wp-block-columns,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-image,
.wp-site-blocks > .wp-block-html,
.wp-site-blocks > .wp-block-separator {
  max-width: 1060px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.wp-site-blocks .alignfull,
.wp-site-blocks .alignwide,
.wp-site-blocks [class*="is-layout-"] {
  max-width: 1060px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

[class*="wp-container-core-group-is-layout-"],
[class*="wp-container-core-columns-is-layout-"] {
  max-width: 1060px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

[class*="wp-container-core-group-is-layout-"] [class*="wp-container-core-group-is-layout-"],
[class*="wp-container-core-group-is-layout-"] [class*="wp-container-core-columns-is-layout-"] {
  padding-left: 0;
  padding-right: 0;
}


/* ---- HEADER / NAV ---- */
.wp-site-blocks > .wp-block-group:first-child,
.wp-site-blocks > header {
  background-color: rgba(245, 241, 232, 0.95) !important;
  backdrop-filter: blur(10px);
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  box-sizing: border-box !important;
}

.wp-site-blocks > .wp-block-group:first-child > *,
.wp-site-blocks > header > * {
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}

/* Nav links */
.wp-block-navigation a {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft) !important;
  text-decoration: none !important;
  transition: color 0.2s;
}

.wp-block-navigation a:hover {
  color: var(--kuarso-red) !important;
}


/* ---- LOGO ---- */
.wp-block-site-logo img,
.wp-block-site-logo a img,
.custom-logo {
  width: 200px !important;
  max-width: 200px !important;
  height: auto !important;
}

.wp-block-site-logo,
.wp-block-site-logo a {
  width: 200px !important;
  max-width: 200px !important;
}


/* ---- BOTONES / CTAs ---- */
.wp-block-button__link,
.wp-element-button {
  background: var(--kuarso-red) !important;
  color: var(--paper) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700 !important;
  padding: 16px 32px !important;
  border: 2px solid var(--kuarso-red) !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: all 0.3s;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}

/* Botones outline */
.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
}

.is-style-outline .wp-block-button__link:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
}


/* ---- LINKS ---- */
a {
  color: var(--kuarso-red);
  transition: color 0.2s;
}

a:hover {
  color: var(--kuarso-red-dark);
}


/* ---- COLUMNAS ---- */
.wp-block-columns {
  max-width: 1060px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 32px;
}


/* ---- IMÁGENES ---- */
.wp-block-image {
  border: 2px solid var(--ink);
  overflow: hidden;
}

.wp-block-image img {
  display: block;
}

/* Esquinas estilo técnico (opcional, solo en imágenes con clase) */
.wp-block-image.is-style-rounded {
  border-radius: 0 !important;
  border: 2px solid var(--ink);
}


/* ---- SEPARADORES ---- */
.wp-block-separator {
  border-color: var(--line-strong) !important;
  border-style: dashed !important;
}


/* ---- LISTAS ---- */
.wp-block-list li::marker {
  color: var(--kuarso-red);
}


/* ---- FAQ / DETAILS ---- */
.wp-block-details {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid var(--line-strong);
  padding: 24px 0;
}

.wp-block-details summary {
  font-family: 'Fraunces', serif !important;
  font-size: 19px !important;
  font-weight: 600;
  color: var(--kuarso-red) !important;
  cursor: pointer;
}

.wp-block-details[open] summary {
  color: var(--ink) !important;
}

.wp-block-details p {
  margin-top: 16px;
}

/* Headings de preguntas (H3 dentro de la sección FAQ) */
.wp-block-details h3,
.wp-block-details .wp-block-heading,
.wp-block-group h3.wp-block-heading {
  color: var(--kuarso-red) !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(22px, 3vw, 30px) !important;
}


/* ---- FORMULARIO HUBSPOT ---- */
.wp-block-group iframe[src*="hubspot"],
.wp-block-html iframe[src*="hubspot"],
.hbspt-form {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.hbspt-form input[type="text"],
.hbspt-form input[type="email"],
.hbspt-form input[type="tel"],
.hbspt-form textarea,
.hbspt-form select {
  font-family: 'Fraunces', serif !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--paper) !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
}

.hbspt-form input[type="submit"],
.hbspt-form .hs-button {
  background: var(--kuarso-red) !important;
  color: var(--paper) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700 !important;
  padding: 16px 32px !important;
  border: 2px solid var(--kuarso-red) !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all 0.3s;
}

.hbspt-form input[type="submit"]:hover,
.hbspt-form .hs-button:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
}


/* ---- TESTIMONIAL / QUOTE ---- */
.wp-block-quote,
.wp-block-pullquote {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 40px !important;
  border-left: 4px solid var(--kuarso-red) !important;
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
  background: var(--paper-warm);
}

.wp-block-quote p,
.wp-block-pullquote p {
  font-family: 'Fraunces', serif !important;
  font-style: italic;
  font-size: 22px !important;
  line-height: 1.4 !important;
  color: var(--ink) !important;
}

.wp-block-quote cite,
.wp-block-pullquote cite {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--steel) !important;
  font-style: normal;
}


/* ---- ÍCONOS DE REDES SOCIALES ---- */
.wp-block-social-links .wp-social-link {
  width: 52px !important;
  height: 52px !important;
}

.wp-block-social-links .wp-social-link svg {
  width: 28px !important;
  height: 28px !important;
}

.wp-block-social-links {
  gap: 16px !important;
  justify-content: center;
}

.wp-block-social-links .wp-social-link {
  padding: 12px !important;
}

.wp-block-social-links.has-huge-icon-size .wp-social-link {
  width: 56px !important;
  height: 56px !important;
}

.wp-block-social-links.has-huge-icon-size .wp-social-link svg {
  width: 32px !important;
  height: 32px !important;
}


/* ---- SECCIONES CON FONDO OSCURO (ink) ---- */
.has-contrast-background-color,
.has-contrast-background-color p,
.has-contrast-background-color h2,
.has-contrast-background-color h3,
.has-contrast-background-color h4 {
  color: var(--paper) !important;
}

.has-contrast-background-color a {
  color: var(--kuarso-red) !important;
}

/* Secciones accent (rojo) */
.has-accent-3-background-color h2,
.has-accent-3-background-color h3,
.has-accent-3-background-color p {
  color: var(--paper) !important;
}


/* ---- FOOTER ---- */
.wp-block-template-part[data-type="core/template-part"] footer,
footer,
.wp-site-blocks > .wp-block-group:last-child {
  background-color: var(--paper-warm) !important;
  padding: 16px 24px 12px !important;
  margin-top: 30px;
  border-top: 2px solid var(--line-strong);
}

footer .wp-block-group,
footer .wp-block-columns,
.wp-site-blocks > .wp-block-group:last-child .wp-block-group,
.wp-site-blocks > .wp-block-group:last-child .wp-block-columns {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  gap: 12px !important;
}

footer p,
footer h4, footer h5, footer h6,
.wp-site-blocks > .wp-block-group:last-child p,
.wp-site-blocks > .wp-block-group:last-child h4 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  color: var(--ink-soft) !important;
}

footer a,
.wp-site-blocks > .wp-block-group:last-child a {
  color: var(--ink-soft) !important;
}

footer a:hover,
.wp-site-blocks > .wp-block-group:last-child a:hover {
  color: var(--kuarso-red) !important;
}

footer .wp-block-social-links,
.wp-site-blocks > .wp-block-group:last-child .wp-block-social-links {
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}

/* Logo footer */
.wp-block-template-part .wp-block-site-logo img,
footer .wp-block-site-logo img,
footer .custom-logo,
.wp-block-group:last-child .wp-block-site-logo img {
  width: 160px !important;
  max-width: 160px !important;
  height: auto !important;
}

footer img[src*="kuarso-logo"],
.wp-block-group:last-child img[src*="kuarso-logo"] {
  width: 160px !important;
  max-width: 160px !important;
  height: auto !important;
}

.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  padding-left: calc(50vw - 550px + 24px) !important;
  padding-right: calc(50vw - 550px + 24px) !important;
  box-sizing: border-box !important;
}


/* ---- WHATSAPP FLOTANTE ---- */
#wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: #25D366;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform 0.2s, box-shadow 0.2s;
  animation: wa-pulse 2.5s infinite;
}

#wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

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


/* ============================================
   MOBILE — ≤ 768px
   ============================================ */
@media (max-width: 768px) {

  .wp-site-blocks {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [class*="wp-container-core-group-is-layout-"],
  [class*="wp-container-core-columns-is-layout-"] {
    padding-left: 8px;
    padding-right: 8px;
  }

  .wp-block-site-logo img,
  .wp-block-site-logo a img,
  .custom-logo {
    width: 150px !important;
    max-width: 150px !important;
  }

  .wp-block-site-logo,
  .wp-block-site-logo a {
    width: 150px !important;
    max-width: 150px !important;
  }

  .wp-block-social-links .wp-social-link {
    width: 44px !important;
    height: 44px !important;
  }

  .wp-block-social-links .wp-social-link svg {
    width: 24px !important;
    height: 24px !important;
  }

  .wp-block-columns {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 24px;
  }

  .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  img,
  .wp-block-image img,
  .wp-block-image figure {
    max-width: 100% !important;
    height: auto !important;
  }

  .wp-site-blocks > .wp-block-group:first-child {
    text-align: center;
  }

  .wp-site-blocks a[href*="wa.me"] {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 16px;
    box-sizing: border-box;
  }

  iframe[src*="youtube"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }

  .wp-block-details {
    padding-left: 8px;
    padding-right: 8px;
  }

  .hbspt-form,
  .wp-block-html iframe {
    max-width: 100%;
    padding: 0 8px;
  }

  .wp-block-group + .wp-block-group,
  .wp-block-columns + .wp-block-group {
    margin-top: 32px;
  }

  .wp-site-blocks > footer,
  .wp-site-blocks > .wp-block-template-part {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #wa-float {
    bottom: 16px;
    right: 16px;
    width: 54px;
    height: 54px;
  }
  #wa-float svg {
    width: 28px;
    height: 28px;
  }
}


/* ============================================
   TABLETS — 769px a 1024px
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {

  .wp-site-blocks {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .wp-block-columns {
    gap: 24px;
  }

  .wp-block-site-logo img,
  .custom-logo {
    width: 170px !important;
    max-width: 170px !important;
  }
}