/* ==========================================================================
   Solutions Page Styles - aligned with WebExport & site design
   ========================================================================== */

body:has(.solutions-page)::before {
  background-position: 100% calc(8%), 100% calc(120%), 100% calc(70%), -75% calc(8%), -75% calc(24%);
}

.solutions-page {
  background: transparent;
  position: relative;
}

/* Hero */
.solutions-hero-section {
  padding: 20px 0 80px;
  position: relative;
  overflow: hidden;
}

.solutions-hero-section::after {
  content: '';
  position: absolute;
  inset: 60px 0 0;
  z-index: 0;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-copy h1 {
  font-size: var(--text-4xl);
  line-height: 1.25;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.hero-copy .hero-sub {
  font-size: 20px;
  color: var(--text-dark);
  line-height: 1.7;
  margin-bottom: 32px;
}

.hero-copy .eyebrow {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dark);
  margin-bottom: 14px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-actions .input {
  flex: 1;
  min-width: 240px;
  padding: 16px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 28px;
  
  font-size: 16px;
  transition: border-color var(--transition-normal);
}

.hero-actions .input:focus {
  outline: none;
  border-color: var(--primary-orange);
}

.hero-visual {
  position: relative;
  min-height: 420px;
}

.hero-blob {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background: linear-gradient(145deg, rgba(254, 250, 246, 0.9), rgba(255, 184, 96, 0.08));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
  z-index: 0;
}

.hero-img {
  position: absolute;
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  object-fit: cover;
}

.hero-img-main {
  width: 58%;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
}

.hero-img-side {
  width: 36%;
  top: 12%;
  left: 5%;
}

.hero-img-stack {
  width: 38%;
  bottom: -6%;
  right: 2%;
}

.hero-img-small {
  width: 28%;
  top: 4%;
  right: 20%;
}

/* Industries */
.solutions-industries {
  padding: 80px 0 60px;
  position: relative;
  z-index: 1;
}

.solutions-industries .section-header.centered {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 50px;
}

.solutions-industries h2 {
  font-size: 42px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 14px;
}

.solutions-industries p {
  font-size: 18px;
  color: var(--text-gray);
  line-height: 1.6;
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.industry-card {
  background: var(--bg-white);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 20px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.industry-media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 240px;
}

.industry-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.industry-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: var(--primary-orange);
  color: var(--text-black);
  padding: 10px 16px;
  border-radius: 999px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.industry-card p {
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.7;
  margin: 0;
}

.industry-cta {
  margin-top: 14px;
  margin-right: 20px;
  display: inline-block;
  color: var(--primary-orange);
  font-weight: var(--weight-bold);
  transition: color var(--transition-fast);
  text-align: right;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
}

.industry-cta:hover {
  color: var(--primary-orange-alt);
}

.industry-align-left {       
  text-align: justify;
  padding-left: 26px;
  padding-right: 26px;
  margin-top: 1rem;
  line-height: 1.6;
  color: var(--text-secondary, #666);
}

/* Audit CTA - reuse pattern from product */
.audit-cta-section {
  padding: 0px 0 120px;
  background: transparent;
  position: relative;
}

.audit-cta-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  align-items: center;
  background: var(--bg-white);
  border-radius: 24px;
  padding: 60px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;
}


.audit-cta-section::before {
  content: '';
  position: absolute;
  inset: 40px 0 0;
  background: linear-gradient(145deg, rgba(89, 208, 220, 0.1), rgba(255, 184, 96, 0.12));
  filter: blur(20px);
  z-index: 0;
}

.audit-text h2 {
  font-size: 38px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
  line-height: 1.25;
}

.audit-text p {
  font-size: 18px;
  color: var(--text-gray);
  margin-bottom: 24px;
  line-height: 1.6;
}

.audit-details h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.audit-details p {
  font-size: 16px;
  color: var(--text-dark);
  line-height: 1.7;
  margin: 0 0 20px 0;
}

.audit-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.audit-input {
  flex: 1;
  min-width: 280px;
  padding: 16px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 28px;
  font-size: 14px;
  transition: border-color var(--transition-normal);
}

.audit-input:focus {
  outline: none;
  border-color: var(--primary-orange);
}

.audit-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
}

.audit-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.audit-features li {
  position: relative;
  padding-left: 30px;
  margin-left: 10px;
  margin-bottom: 15px;
  font-size: 14px;
  color: var(--text-gray);
  line-height: 1.6;
}

.audit-features li:last-child {
  margin-bottom: 25px;
}

.audit-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  background: var(--primary-orange);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 820px){
  /* deja SOLO el audit si quieres (opcional) */
  .solutions-page .audit-cta-content{
    grid-template-columns: 1fr;
  }
  .hero-grid,
  .audit-cta-content {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 0px;
  }

}

/* Hero a 1 columna solo en móvil real */
@media (max-width: 768px){
  .solutions-page .solutions-hero-section .hero-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .solutions-hero-section {
    padding: 30px 0 40px;
  }

  .industry-grid {
    grid-template-columns: 1fr;
  }

  .hero-img-main {
    width: 68%;
  }

  .hero-img-side,
  .hero-img-stack,
  .hero-img-small {
    width: 40%;
  }
}

@media (max-width: 640px) {
  .hero-copy h1 {
    font-size: 36px;
  }

  .hero-copy .hero-sub {
    font-size: 18px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .input,
  .audit-input {
    width: 100%;
  }

  .audit-cta-content {
    padding: 10px;
  }
}


body:has(.solutions-page){
  /* Empujes que AUMENTAN cuando la pantalla se hace más angosta */
  --sol-rshift: clamp(90px, calc(260px - 10vw), 260px);  /* derecha: empuja afuera */
  --sol-lshift: clamp(170px, calc(420px - 14vw), 420px); /* izquierda: empuja afuera */
}

body:has(.solutions-page)::before{
  background-repeat: no-repeat !important;

  /* Escala suave (con vw) para que NO “invadan” al achicar */
  background-size:
    clamp(380px, 46vw, 720px) auto,   /* 1: top-right (naranja grande) */
    clamp(520px, 58vw, 900px) auto,   /* 2: muy abajo */
    clamp(360px, 36vw, 560px) auto,   /* 3: abajo (no hero) */
    clamp(380px, 50vw, 760px) auto,   /* 4: left (turquesa) */
    clamp(340px, 42vw, 620px) auto    /* 5: abajo (no hero) */
    !important;

  /* 1 y 4 se mantienen como “composición del hero”
     3 y 5 se empujan MÁS abajo para que nunca entren al fold */
  background-position:
    calc(100% + var(--sol-rshift)) clamp(60px, 8vh, 110px),     /* 1 */
    100%                          clamp(1500px, 190vh, 2200px),/* 2 */
    calc(100% + 40px)             clamp(1050px, 140vh, 1700px),/* 3 */
    calc(0%  - var(--sol-lshift)) clamp(70px,  9vh, 120px),    /* 4 */
    calc(0%  - var(--sol-lshift)) clamp(1250px, 170vh, 2100px) /* 5 */
    !important;
}

/* Ajuste extra para “laptop angosta” (evita que asomen blobs de abajo) */
@media (max-width: 820px){
  body:has(.solutions-page)::before{
    background-position:
      calc(100% + var(--sol-rshift)) clamp(60px, 9vh, 120px),
      100%                          clamp(1700px, 230vh, 2600px),
      calc(100% + 60px)             clamp(1250px, 175vh, 2150px),
      calc(0%  - var(--sol-lshift)) clamp(70px,  9vh, 130px),
      calc(0%  - var(--sol-lshift)) clamp(1500px, 220vh, 2700px)
      !important;
  }
}

@media (max-width: 520px){
  body:has(.solutions-page)::before{
    background-position:
      calc(100% + 422px) 18vh,
      calc(100% + 260px) 180vh,
      calc(100% + 40px)  80vh,
      calc(0%  - 260px)  10vh,
      calc(0%  - 999px)  0
      !important;

    background-size:
      520px auto,
      780px auto,
      460px auto,
      520px auto,
      0 0
      !important;
  }
}

/* =========================================
   SOLUTIONS — Botones con formato “Home Hero”
   (sin afectar otros sitios)
   ========================================= */

/* 1) Base de botón (igual que Home) */
.solutions-page .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* mismas “sensaciones” de Home */
  height: 52px;                  /* altura consistente */
  padding: 0 40px;               /* sin padding vertical (lo maneja height) */
  border-radius: var(--radius-md);

  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal); /* evita que se ponga “gorda” */
  line-height: 1;

  text-decoration: none;
  border: none;
}

/* 2) Variantes (mantén tu look actual) */
.solutions-page .btn-primary,
.solutions-page .btn-action{
  background-color: var(--primary-orange);
  color: var(--text-black);
}

.solutions-page .btn-primary:hover,
.solutions-page .btn-action:hover{
  background-color: var(--primary-orange-alt);
  transform: translateY(-2px);
}

.solutions-page .btn-outline{
  background-color: transparent;
  color: var(--text-black);
  border: 1px solid var(--text-gray);
}

.solutions-page .btn-outline:hover{
  border-color: var(--primary-orange);
  color: var(--primary-orange);
}

/* 3) En móvil, como tu sistema */
@media (max-width: 768px){
  .solutions-page .btn{
    height: 48px;
    padding: 0 30px;
    font-size: 16px; /* tu regla actual móvil */
  }
}

/* =========================================================
   SOLUTIONS — Typography aligned with HOME
   Pegar AL FINAL de typography.css (recomendado)
   ========================================================= */

body.solutions-page{
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-dark);
}

/* ---------- HERO (Solutions) ---------- */
/* OJO: en Solutions el hero usa .hero-copy h1 y .hero-sub */
body.solutions-page .solutions-hero-section .hero-copy .eyebrow{
  font-size: clamp(13px, 1.4vw, 20px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04px !important;
  text-transform: none !important; /* Home no grita */
  color: var(--text-dark) !important;
  margin-bottom: 10px !important;
}

body.solutions-page .solutions-hero-section .hero-copy h1{
  font-size: clamp(34px, 3.6vw, 47px) !important;
  line-height: 1.12 !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: 0.1px !important;
  margin-bottom: 20px !important;
  color: var(--text-dark) !important;
}

body.solutions-page .solutions-hero-section .hero-copy .hero-sub{
  font-size: clamp(16px, 1.6vw, 22px) !important;
  line-height: clamp(28px, 2.4vw, 42px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04px !important;
  color: var(--text-dark) !important;
  margin-bottom: clamp(24px, 3vw, 50px) !important;
}

/* ---------- SECTION TITLES (H2) ---------- */
body.solutions-page .solutions-industries h2,
body.solutions-page .audit-text h2{
  font-size: clamp(32px, 2.3vw, 42px) !important;
  line-height: 1.15 !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: 0 !important;
}

/* ---------- SECTION LEADS / PARAGRAPHS (los “rectángulos rojos”) ---------- */
/* Esto iguala los textos tipo descripción para que no haya unos a 14px y otros a 18px */
body.solutions-page .solutions-industries p,
body.solutions-page .industry-card p,
body.solutions-page .industry-align-left,
body.solutions-page .audit-text p,
body.solutions-page .audit-details p,
body.solutions-page .audit-features li{
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.65 !important;
  color: var(--text-gray) !important;
}

/* ---------- SUBTÍTULOS / TITULITOS (h3) ---------- */
body.solutions-page .audit-details h3{
  font-size: clamp(16px, 1.1vw, 18px) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
}

/* ---------- “Learn more” consistente ---------- */
body.solutions-page .industry-cta{
  font-size: clamp(13px, 0.9vw, 14px) !important;
  font-weight: 600 !important;
}

/* ---------- Inputs: texto consistente (sin tocar layout) ---------- */
body.solutions-page .hero-actions .input,
body.solutions-page .audit-input{
  font-size: 16px !important;
}

/* =========================================================
   SOLUTIONS — Typography aligned with HOME
   Pegar al FINAL de typography.css (recomendado)
   ========================================================= */

/* Tokens (mismos rangos que usaste para Home/Product) */
.solutions-page{
  --fs-hero-eyebrow: clamp(13px, 1.4vw, 20px);
  --fs-hero-title:   clamp(34px, 3.6vw, 47px);
  --fs-hero-sub:     clamp(16px, 1.6vw, 22px);

  --fs-section-title: clamp(32px, 2.3vw, 42px);
  --lh-section-title: 1.15;

  --fs-body:    clamp(16px, 1.1vw, 18px);
  --fs-body-sm: clamp(14px, 0.95vw, 16px);
  --lh-body: 1.65;
}

/* Base */
.solutions-page{
  font-size: 16px;
  line-height: var(--lh-body);
}

body.product-page .hero-tagline{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-gray);
  margin: 0 0 12px;
  line-height: 1.2;
  
  
}

.solutions-page .solutions-hero-section .hero-copy h1{
  font-size: var(--fs-hero-title) !important;
  line-height: 1.12 !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: 0.1px !important;
  margin-bottom: 20px !important;
  color: var(--text-dark) !important;
}

.solutions-page .solutions-hero-section .hero-copy .hero-sub{
  font-size: var(--fs-hero-sub) !important;
  line-height: var(--lh-body) !important;
  margin-bottom: 32px !important;
  color: var(--text-dark) !important;
}

/* SECTION TITLES (Built for..., Audit title, etc.) */
.solutions-page .solutions-industries h2,
.solutions-page .audit-text h2{
  font-size: var(--fs-section-title) !important;
  line-height: var(--lh-section-title) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: 0 !important;
}

/* Section subtitles / ledes */
.solutions-page .solutions-industries p,
.solutions-page .audit-text p{
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
}

/* Card body text (los textos “chiquitos” que quieres igualar) */
.solutions-page .industry-card p{
  font-size: var(--fs-body-sm) !important;
  line-height: 1.6 !important;
  color: var(--text-gray) !important;
}

/* “Learn more” como microcopy consistente */
.solutions-page .industry-cta{
  font-size: clamp(13px, 0.9vw, 14px) !important;
  font-weight: 600 !important;
}

/* Audit list + input (para que no se vea más “delgado” que el resto) */
.solutions-page .audit-features li{
  font-size: var(--fs-body-sm) !important;
  line-height: 1.6 !important;
}

.solutions-page .audit-input{
  font-size: 16px !important;
}


/* SOLUTIONS — igualar altura del input al botón */
.solutions-page .solutions-hero-section .hero-actions .input{
  height: 52px;        /* pon aquí el mismo alto que usa tu botón */
  padding: 0 20px;     /* quita padding vertical */
  box-sizing: border-box;
  line-height: 52px;   /* centra el placeholder/texto */
}

/* =========================================================
   SOLUTIONS HERO — Typography like ABOUT (SIN tocar imagen/layout)
   Pegar AL FINAL de css/pages/solutions.css
   ========================================================= */

body:has(.solutions-page) .solutions-hero-section .hero-copy{
  max-width: 560px;
}

/* Eyebrow (como About) */
body:has(.solutions-page) .solutions-hero-section .hero-copy .eyebrow{
  font-size: 13px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--text-gray) !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
}

/* H1 (como About) */
body:has(.solutions-page) .solutions-hero-section .hero-copy h1{
  font-size: clamp(36px, 3.2vw, 52px) !important;
  line-height: 1.12 !important;
  margin-bottom: 16px !important;
  color: var(--text-dark) !important;
}

/* Sub (como About) */
body:has(.solutions-page) .solutions-hero-section .hero-copy .hero-sub{
  font-size: clamp(16px, 1.15vw, 18px) !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  max-width: 54ch !important;
  color: var(--text-dark) !important;
}

/* Espaciado acciones (como About) */
body:has(.solutions-page) .solutions-hero-section .hero-actions{
  margin-bottom: 24px;
}

.audit-image{
  position: relative;
  overflow: visible; /* para que el badge pueda “salirse” un poco */
}

.audit-image .audit-mockup{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.12);
}

/* Badge overlay */
.audit-image .audit-badge{
  position: absolute;
  right: -14px;      /* mueve hacia afuera */
  bottom: 18px;      /* súbelo/bájalo */
  width: 120px;      /* tamaño badge */
  height: auto;
  transform: rotate(-2deg);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.18));
  border-radius: 16px;
  z-index: 2;
  pointer-events: none; /* no bloquea clicks */
}

/* Ajuste responsive */
@media (max-width: 900px){
  .audit-image .audit-badge{
    right: -10px;
    width: 105px;
    bottom: 14px;
  }
}

@media (max-width: 640px){
  .audit-image .audit-badge{
    right: 10px;
    bottom: 10px;
    width: 92px;
    transform: none;
  }
}

.audit-image .audit-badge{
  position: absolute;
  right: -15px;
  bottom: 8px;
  width: 118px;
  height: auto;

  transform: none;          /* <- QUITA lo chueco */
  border-radius: 14px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.18));
  z-index: 2;
  pointer-events: none;
}

/* AUDIT CTA — igualar altura input + botón */
.audit-cta-section .audit-form{
  align-items: center; /* asegura misma línea */
}

.audit-cta-section .audit-form .audit-input,
.audit-cta-section .audit-form .btn{
  height: 52px;
}

.audit-cta-section .audit-form .audit-input{
  box-sizing: border-box;
  padding: 0 22px;     /* sin padding vertical */
  line-height: 52px;   /* centra placeholder/texto */
}

/* Móvil: mismo comportamiento que tus botones */
@media (max-width: 768px){
  .audit-cta-section .audit-form .audit-input,
  .audit-cta-section .audit-form .btn{
    height: 48px;
  }

  .audit-cta-section .audit-form .audit-input{
    line-height: 48px;
  }
}

/* AUDIT CTA — input y botón con el mismo ancho */
.audit-cta-section .audit-form{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ambos elementos se comportan igual en flex */
.audit-cta-section .audit-form .audit-input,
.audit-cta-section .audit-form .btn{
  flex: 1 1 260px;   /* mismo “peso” + permite wrap */
  min-width: 260px;
}

/* mantiene la misma altura que ya estabas ajustando */
.audit-cta-section .audit-form .audit-input,
.audit-cta-section .audit-form .btn{
  height: 52px;
}

.audit-cta-section .audit-form .audit-input{
  padding: 0 22px;
  line-height: 52px;
  box-sizing: border-box;
}

@media (max-width: 768px){
  .audit-cta-section .audit-form .audit-input,
  .audit-cta-section .audit-form .btn{
    height: 48px;
  }
  .audit-cta-section .audit-form .audit-input{
    line-height: 48px;
  }
}