/* ============================================================
   TANGIBLE — Sistema de diseño
   tangible-design.css v1.1
   Calibrado al sistema del tema: 1rem = 10px (base 62.5%)
   ============================================================ */


/* ------------------------------------------------------------
   1. VARIABLES GLOBALES
   ------------------------------------------------------------ */
:root {
  /* Color */
  --t-azul:         #2a3b45;
  --t-naranja:      #cc7051;
  --t-acero:        #607480;
  --t-gris:         #ddded9;
  --t-naranja-soft: #ff926b;
  --t-blanco:       #fafaf9;

  /* Tipografía — rem calibrado a base 62.5% (1rem = 10px) */
  --t-font-display: 'Geologica', sans-serif;
  --t-font-body:    'Merriweather', serif;

  --t-size-xs:   1.2rem;   /* 12px */
  --t-size-sm:   1.4rem;   /* 14px */
  --t-size-base: 1.6rem;   /* 16px — igual que el body del tema */
  --t-size-md:   1.8rem;   /* 20px */
  --t-size-lg:   2.2rem;   /* 24px */
  --t-size-xl:   3.0rem;   /* 30px */
  --t-size-2xl:  3.6rem;   /* 36px */
  --t-size-3xl:  4.8rem;   /* 48px */
  --t-size-4xl:  6.4rem;   /* 64px */

  /* Espaciado */
  --t-space-xs:  0.5rem;     /* 10px */
  --t-space-sm:  1rem;     /* 20px */
  --t-space-md:  1.5rem;     /* 40px */
  --t-space-lg:  3rem;     /* 80px */
  --t-space-xl:  4rem;    /* 120px */
  --t-space-2xl: 8rem;    /* 200px */

  /* Transiciones */
  --t-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --t-duration: 240ms;
}


/* ------------------------------------------------------------
   2. TIPOGRAFÍA — solo lo que el tema no resuelve bien
   No pisamos font-size de body ni de headings globales.
   Intervenimos con clases utilitarias propias.
   ------------------------------------------------------------ */

/* Clase display para heroes y titulares grandes */
.t-display {
  font-family: var(--t-font-display);
  font-size: clamp(3.6rem, 6vw, 7.2rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--t-azul);
}

/* Etiqueta de categoría / eyebrow */
.t-label {
  font-family: var(--t-font-display);
  font-size: var(--t-size-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--t-acero);
}

/* Texto de cuerpo largo — Merriweather */
.t-body {
  font-family: var(--t-font-body);
  font-size: var(--t-size-base);
  line-height: 1.8;
  color: var(--t-azul);
}

/* Párrafo con ancho máximo legible */
.t-prose p {
  /*max-width: 65ch;*/
  line-height: 1.8;
}


/* ------------------------------------------------------------
   3. COLOR — fondos y textos
   ------------------------------------------------------------ */
.t-bg-azul   { background-color: var(--t-azul);   color: var(--t-gris);   }
.t-bg-gris   { background-color: var(--t-gris);   color: var(--t-azul);   }
.t-bg-blanco { background-color: var(--t-blanco); color: var(--t-azul);   }
.t-bg-acero  { background-color: var(--t-acero);  color: var(--t-blanco); }

.t-bg-azul h1,
.t-bg-azul h2,
.t-bg-azul h3,
.t-bg-azul h4 { color: var(--t-blanco); }

.t-bg-azul p  { color: var(--t-gris); }

.t-text-naranja { color: var(--t-naranja); }
.t-text-acero   { color: var(--t-acero);  }
.t-text-blanco  { color: var(--t-blanco); }


/* ------------------------------------------------------------
   4. LAYOUT — contenedores y grillas
   ------------------------------------------------------------ */
.t-container {
  width: 100%;
  max-width: 1290px;
  margin-inline: auto;
  padding-inline: var(--t-space-md);
}

.t-container--narrow {
  max-width: 1290px;
  margin-inline: auto;
  padding-inline: var(--t-space-md);
}

.t-section {
  padding-block: var(--t-space-xl);
}

.t-section--lg {
  padding-block: var(--t-space-2xl);
}

.t-grid-asym {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--t-space-lg);
  align-items: start;
}

.t-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--t-space-md);
}

.t-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--t-space-md);
}

@media (max-width: 768px) {
  .t-grid-asym,
  .t-grid-3,
  .t-grid-2 {
    grid-template-columns: 1fr;
  }
}
.site-container {padding-top: 10px!important; padding-bottom: 10px!important}


/* ------------------------------------------------------------
   5. BOTONES Y CTAs
   ------------------------------------------------------------ */
.t-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--t-font-display);
  font-size: var(--t-size-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.4rem 3.2rem;
  border-radius: 2px;
  transition: all var(--t-duration) var(--t-ease);
  cursor: pointer;
  border: none;
  line-height: 1;
}

.t-btn--primary {
  background-color: var(--t-naranja);
  color: var(--t-blanco) !important;
}

.t-btn--primary:hover {
  background-color: var(--t-azul);
  color: var(--t-blanco) !important;
  transform: translateY(-2px);
  text-decoration: none;
}

.t-btn--ghost {
  background-color: transparent;
  color: var(--t-azul) !important;
  border: 1.5px solid var(--t-azul);
}

.t-btn--ghost:hover {
  background-color: var(--t-azul);
  color: var(--t-blanco) !important;
  transform: translateY(-2px);
  text-decoration: none;
}

.t-btn--ghost-light {
  background-color: transparent;
  color: var(--t-blanco) !important;
  border: 1.5px solid rgba(255,255,255,0.5);
}

.t-btn--ghost-light:hover {
  border-color: var(--t-blanco);
  background-color: rgba(255,255,255,0.1);
  text-decoration: none;
}


/* ------------------------------------------------------------
   6. LINKS CON UNDERLINE ANIMADO
   ------------------------------------------------------------ */
.t-link {
  color: var(--t-azul);
  text-decoration: none;
  background-image: linear-gradient(var(--t-naranja), var(--t-naranja));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size var(--t-duration) var(--t-ease);
}

.t-link:hover {
  background-size: 100% 1.5px;
  color: var(--t-azul);
  text-decoration: none;
}


/* ------------------------------------------------------------
   7. SEPARADOR
   ------------------------------------------------------------ */
.t-divider {
  width: 4rem;
  height: 2px;
  background-color: var(--t-naranja);
  border: none;
  margin-block: var(--t-space-md);
}

.t-divider--lg {
  width: 8rem;
}


/* ------------------------------------------------------------
   8. MISCELÁNEA GEOMÉTRICA
   Derivada del isotipo: triángulos en tensión
   ------------------------------------------------------------ */
.t-geo {
  position: relative;
  overflow: hidden;
}

.t-geo::after {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpolygon points='80,8 152,152 8,152' fill='none' stroke='%23cc7051' stroke-width='1' opacity='0.2'/%3E%3Cpolygon points='80,32 128,128 32,128' fill='none' stroke='%232a3b45' stroke-width='1' opacity='0.12'/%3E%3Cpolygon points='80,56 104,104 56,104' fill='none' stroke='%23cc7051' stroke-width='0.5' opacity='0.15'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.t-geo--tr::after {
  top: -40px;
  right: -40px;
  transform: rotate(12deg);
}

.t-geo--bl::after {
  bottom: -40px;
  left: -40px;
  transform: rotate(-18deg) scale(1.3);
}

.t-geo--br::after {
  bottom: -20px;
  right: -20px;
  transform: rotate(6deg) scale(0.8);
  opacity: 0.6;
}


/* ------------------------------------------------------------
   9. ANIMACIONES DE SCROLL
   Activadas por IntersectionObserver en footer
   ------------------------------------------------------------ */
.t-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--t-ease), transform 0.6s var(--t-ease);
}

.t-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.t-reveal--delay-1 { transition-delay: 0.1s; }
.t-reveal--delay-2 { transition-delay: 0.2s; }
.t-reveal--delay-3 { transition-delay: 0.3s; }


/* ------------------------------------------------------------
   10. NAVEGACIÓN — overrides quirúrgicos sobre Twenty Twenty
   ------------------------------------------------------------ */
.primary-menu > li > a {
  font-family: var(--t-font-display);
  font-size: var(--t-size-sm);
  font-weight: 400;
  letter-spacing: 0.04em;
  transition: color var(--t-duration) var(--t-ease);
}

.primary-menu > li > a:hover {
  color: var(--t-naranja);
  text-decoration: none;
}


/* ------------------------------------------------------------
   11. FOOTER — override
   ------------------------------------------------------------ */
.site-footer {
  background-color: var(--t-azul);
  color: var(--t-gris);
}

.site-footer a {
  color: var(--t-gris);
  transition: color var(--t-duration) var(--t-ease);
}

.site-footer a:hover {
  color: var(--t-naranja-soft);
  text-decoration: none;
}

.footer-top {
  border-top: none !important;
}



/* ============================================================
   HOME — Estilos específicos
   ============================================================ */


/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.t-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.t-hero .t-label {
  margin-bottom: 2rem;
}

.t-hero__title {
  font-family: var(--t-font-display);
  font-size: clamp(4rem, 6vw, 7.2rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--t-blanco);
  margin-bottom: 2rem;
}

.t-hero__intro {
  font-family: var(--t-font-body);
  font-size: var(--t-size-lg);
  line-height: 1.7;
  color: var(--t-gris);
  max-width: 52ch;
  margin-bottom: 3.8rem;
}

.t-hero__cta {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  flex-wrap: wrap;
}

.t-hero__link {
  font-family: var(--t-font-display);
  font-size: var(--t-size-sm);
  color: var(--t-gris);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color var(--t-duration) var(--t-ease);
}

.t-hero__link:hover {
  color: var(--t-naranja-soft);
}


/* ------------------------------------------------------------
   Distinción
   ------------------------------------------------------------ */
.t-distincion h2 {
  font-size: clamp(3rem, 4vw, 4.8rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  line-height: 1.1;
}

.t-distincion .t-prose p {
  font-size: var(--t-size-md);
  line-height: 1.85;
  color: var(--t-azul);
  margin-bottom: 2rem;
  max-width: 62ch;
}


/* ------------------------------------------------------------
   Tres ejes
   ------------------------------------------------------------ */
.t-ejes__intro {
  /*max-width: 600px;*/
  margin-bottom: var(--t-space-lg);
}

.t-ejes__intro h2 {
  font-size: clamp(2.8rem, 3.5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  line-height: 1.1;
}

.t-ejes__sub {
  font-family: var(--t-font-body);
  font-size: var(--t-size-md);
  color: var(--t-azul);
  line-height: 1.7;
  max-width: 55ch;
}

.t-eje {
  padding: 3.2rem;
  background: rgba(255,255,255,0.6);
  border-top: 2px solid var(--t-naranja);
}

.t-eje__num {
  display: block;
  font-family: var(--t-font-display);
  font-size: var(--t-size-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--t-naranja);
  margin-bottom: 1.6rem;
}

.t-eje__num img {width: 75px}

.t-eje__title {
  font-family: var(--t-font-display);
  font-size: var(--t-size-lg);
  font-weight: 500;
  color: var(--t-azul);
	line-height: 1.2;
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}

.t-eje__text {
  font-family: var(--t-font-body);
  font-size: var(--t-size-base);
  line-height: 1.5;
  color: var(--t-azul);
  max-width: 100%;
}


/* ------------------------------------------------------------
   Metodología
   ------------------------------------------------------------ */
.t-metodo__intro {
  max-width: 600px;
  margin-bottom: var(--t-space-lg);    float: left;
}
.t-metodo__intro__hex {    float: left; max-width: 545px}

.t-metodo__intro h2 {
  font-size: clamp(2.8rem, 3.5vw, 4.2rem);
  font-weight: 300;
  color: var(--t-blanco);
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  line-height: 1.1;
}

.t-metodo__sub {
  font-family: var(--t-font-body);
  font-size: var(--t-size-md);
  color: var(--t-gris);
  line-height: 1.7;
  max-width: 58ch;
}

.t-metodo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: rgba(255,255,255,0.1);
  margin-bottom: var(--t-space-lg); clear: both;
}

.t-movimiento {
  padding: 3.2rem 2.4rem;
  background-color: var(--t-azul);
  position: relative;
  transition: background-color var(--t-duration) var(--t-ease);
}

.t-movimiento:hover {
  background-color: #1e2d35;
}

.t-movimiento__num {
  display: block;
  font-family: var(--t-font-display);
  font-size: 6.4rem;
  font-weight: 300;
  color: var(--t-blanco);
  opacity: 0.12;
  line-height: 1;
  margin-bottom: 1.6rem;
  letter-spacing: -0.04em;
}

.t-movimiento__title {
  font-family: var(--t-font-display);
  font-size: var(--t-size-lg);
  font-weight: 500;
  color: var(--t-blanco);
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}

.t-movimiento__text {
  font-family: var(--t-font-body);
  font-size: var(--t-size-base);
  line-height: 1.7;
  color: var(--t-gris);
  max-width: 100%;
}

.t-metodo__cta {
  text-align: left;
}

.t-metodo__cta .t-link {
  font-family: var(--t-font-display);
  font-size: var(--t-size-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--t-naranja-soft);
  background-image: linear-gradient(var(--t-naranja-soft), var(--t-naranja-soft));
}


/* ------------------------------------------------------------
   Identidad
   ------------------------------------------------------------ */
.t-identidad h2 {
  font-size: clamp(2.8rem, 3.5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  line-height: 1.1;
}

.t-identidad .t-prose p {
  font-size: var(--t-size-md);
  line-height: 1.85;
  color: var(--t-azul);
  margin-bottom: 2rem;
  max-width: 62ch;
}

.t-identidad__teaser {
  font-family: var(--t-font-display);
  font-size: var(--t-size-lg);
  font-weight: 400;
  color: var(--t-acero);
  line-height: 1.4;
  margin-top: var(--t-space-md);
  margin-bottom: 1.6rem;
  max-width: 50ch;
}


/* ------------------------------------------------------------
   Logos
   ------------------------------------------------------------ */
.t-logos__label {
  text-align: center;
  margin-bottom: var(--t-space-md);
}

.t-logos__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--t-space-md);
  align-items: center;
}

.t-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.t-logo-item img {
  max-height: 9rem;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: opacity var(--t-duration) var(--t-ease),
              filter var(--t-duration) var(--t-ease);
}

.t-logo-item img:hover {
  opacity: 1;
  filter: grayscale(0%);
}


/* ------------------------------------------------------------
   CTA Final
   ------------------------------------------------------------ */
.t-cta-final {
  background-color: var(--t-naranja);
  text-align: center;
}

.t-cta-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.t-cta-final__title {
  font-family: var(--t-font-display);
  font-size: clamp(2.8rem, 3.5vw, 4.2rem);
  font-weight: 300;
  color: var(--t-blanco);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2.4rem;
}

.t-cta-final__sub {
  font-family: var(--t-font-body);
  font-size: var(--t-size-md);
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  max-width: 50ch;
  margin-bottom: 4rem;
}


/* ------------------------------------------------------------
   Responsive — Home
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .t-hero {
    min-height: 100svh;
    padding-bottom: 8rem;
  }

  .t-hero__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .t-metodo__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .t-logos__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .t-metodo__grid {
    grid-template-columns: 1fr;
  }
}



/* ============================================================
   BOTÓN FLOTANTE WHATSAPP — solo mobile
   ============================================================ */
.t-whatsapp-float {
  position: fixed;
  bottom: 3.2rem;
  right: 3.2rem;
  width: 5.6rem;
  height: 5.6rem;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: transform var(--t-duration) var(--t-ease),
              box-shadow var(--t-duration) var(--t-ease);
  z-index: 9999;
}

.t-whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.t-whatsapp-float svg {
  width: 2.8rem;
  height: 2.8rem;
  fill: #ffffff;
}

@media (min-width: 769px) {
  .t-whatsapp-float {
    display: none;
  }
}



/* ============================================================
   NOSOTROS — Estilos específicos
   ============================================================ */

.t-nos-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.t-nos-hero__title {
  font-family: var(--t-font-display);
  font-size: clamp(3.2rem, 5vw, 6rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--t-blanco);
  margin-bottom: 3.2rem;
  margin-top: 2rem;
}

.t-nos-hero__intro {
  font-family: var(--t-font-body);
  font-size: var(--t-size-lg);
  line-height: 1.75;
  color: var(--t-gris);
  max-width: 58ch;
}

.t-nos-origen h2 {
  font-size: clamp(2.8rem, 3.5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.t-nos-origen .t-prose p {
  font-size: var(--t-size-md);
  line-height: 1.85;
  color: var(--t-azul);
  margin-bottom: 2rem;
  max-width: 62ch;
}

.t-nos-mirada__intro {
  margin-bottom: var(--t-space-lg);
}

.t-nos-mirada__intro h2 {
  font-size: clamp(2.8rem, 3.5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.t-nos-mirada__intro .t-prose p {
  font-size: var(--t-size-md);
  line-height: 1.85;
  color: var(--t-azul);
  margin-bottom: 2rem;
  max-width: 62ch;
}

.t-nos-manifiesto h2 {
  font-size: clamp(2.8rem, 3.5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.t-nos-manifiesto__text {
  font-family: var(--t-font-body);
  font-size: var(--t-size-lg);
  line-height: 1.8;
  color: var(--t-gris);
  max-width: 58ch;
  margin-bottom: 3.2rem;
}

.t-nos-manifiesto__link {
  font-family: var(--t-font-display);
  font-size: var(--t-size-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  background-image: linear-gradient(var(--t-naranja-soft), var(--t-naranja-soft));
}

@media (max-width: 768px) {
  .t-nos-hero {
    min-height: 80svh;
    padding-top: 10rem;
    padding-bottom: 6rem;
  }
}



/* ============================================================
   DIAGNÓSTICO — Estilos específicos
   ============================================================ */

.t-diag-hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.t-diag-hero__title {
  font-family: var(--t-font-display);
  font-size: clamp(3.2rem, 5vw, 6rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--t-blanco);
  margin-bottom: 3.2rem;
  margin-top: 2rem;
}

.t-diag-hero__title span {
  color: var(--t-naranja-soft);
}

.t-diag-hero__intro {
  font-family: var(--t-font-body);
  font-size: var(--t-size-lg);
  line-height: 1.75;
  color: var(--t-gris);
  max-width: 56ch;
  margin-bottom: 4rem;
}

.t-diag-hero__cta {
  display: flex;
  gap: 2.4rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Promesa */
.t-diag-promesa h2 {
  font-size: clamp(2.4rem, 3.2vw, 3.8rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 2rem;
}

.t-diag-promesa .t-prose p {
  font-size: var(--t-size-md);
  line-height: 1.85;
  color: var(--t-azul);
  margin-bottom: 2rem;
  max-width: 62ch;
}

/* Proceso */
.t-diag-proceso__intro {
  margin-bottom: var(--t-space-lg);
}

.t-diag-proceso__intro h2 {
  font-size: clamp(2.4rem, 3.2vw, 3.8rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.t-diag-pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: rgba(42,59,69,0.15);
}

.t-paso {
  padding: 3.2rem 2.4rem;
  background-color: var(--t-gris);
  position: relative;
}

.t-paso__num {
  display: block;
  font-family: var(--t-font-display);
  font-size: 6.4rem;
  font-weight: 300;
  color: var(--t-azul);
  opacity: 0.12;
  line-height: 1;
  margin-bottom: 1.6rem;
  letter-spacing: -0.04em;
}

.t-paso__title {
  font-family: var(--t-font-display);
  font-size: var(--t-size-lg);
  font-weight: 500;
  color: var(--t-azul);
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}

.t-paso__text {
  font-family: var(--t-font-body);
  font-size: var(--t-size-base);
  line-height: 1.7;
  color: var(--t-azul);
}

/* Entregable */
.t-diag-entregable__intro {
  margin-bottom: var(--t-space-lg);
  /*max-width: 700px;*/
}

.t-diag-entregable__intro h2 {
  font-size: clamp(2.8rem, 3.5vw, 4.8rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.t-diag-entregable__sub {
  font-family: var(--t-font-body);
  font-size: var(--t-size-md);
  color: var(--t-gris);
  line-height: 1.7;
  max-width: 58ch;
}

.t-diag-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: rgba(255,255,255,0.1);
  margin-bottom: var(--t-space-md);
}

.t-diag-item {
  padding: 2.8rem 2.4rem;
  background-color: var(--t-azul);
  border-top: 2px solid var(--t-naranja);
  transition: background-color var(--t-duration) var(--t-ease);
}

.t-diag-item:hover {
  background-color: #1e2d35;
}

.t-diag-item__title {
  font-family: var(--t-font-display);
  font-size: var(--t-size-md);
  font-weight: 500;
  color: var(--t-blanco);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.t-diag-item__text {
  font-family: var(--t-font-body);
  font-size: var(--t-size-base);
  line-height: 1.65;
  color: var(--t-gris);
}

.t-diag-loom {
  font-family: var(--t-font-display);
  font-size: var(--t-size-sm);
  color: var(--t-acero);
  letter-spacing: 0.04em;
  text-align: center;
  padding-top: var(--t-space-md);
}

/* Perfil */
.t-diag-perfil__intro {
  margin-bottom: var(--t-space-lg);
}

.t-diag-perfil__intro h2 {
  font-size: clamp(2.4rem, 3.2vw, 3.8rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.t-diag-si,
.t-diag-no {
  padding: 3.2rem;
}

.t-diag-si {
  background-color: rgba(42,59,69,0.05);
  border-top: 2px solid var(--t-naranja);
}

.t-diag-no {
  background-color: rgba(42,59,69,0.03);
  border-top: 2px solid var(--t-acero);
}

.t-diag-si__title,
.t-diag-no__title {
  font-family: var(--t-font-display);
  font-size: var(--t-size-md);
  font-weight: 500;
  color: var(--t-azul);
  margin-bottom: 2rem;
}

.t-diag-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.t-diag-lista li {
  font-family: var(--t-font-body);
  font-size: var(--t-size-base);
  line-height: 1.65;
  color: var(--t-azul);
  padding-left: 2rem;
  position: relative;
}

.t-diag-lista li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--t-naranja);
  font-family: var(--t-font-display);
}

.t-diag-lista--no li::before {
  content: '—';
  color: var(--t-acero);
}

/* Precio */
.t-diag-precio h2 {
  font-size: clamp(2.8rem, 3.5vw, 4.8rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.t-diag-precio .t-prose p {
  font-size: var(--t-size-md);
  line-height: 1.85;
  color: var(--t-azul);
  margin-bottom: 2rem;
  max-width: 58ch;
}

.t-diag-precio__nota {
  font-family: var(--t-font-display) !important;
  font-size: var(--t-size-sm) !important;
  color: var(--t-acero) !important;
  letter-spacing: 0.02em;
}

/* CTA final */
.t-diag-cta {
  text-align: center;
}

.t-diag-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.t-diag-cta h2 {
  font-size: clamp(2.8rem, 3.5vw, 4.8rem);
  font-weight: 300;
  color: var(--t-blanco);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2.4rem;
}

.t-diag-cta__sub {
  font-family: var(--t-font-body);
  font-size: var(--t-size-md);
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  max-width: 50ch;
  margin-bottom: 4rem;
}

.t-diag-cta__btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Responsive */
@media (max-width: 900px) {
  .t-diag-pasos {
    grid-template-columns: repeat(2, 1fr);
  }

  .t-diag-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .t-diag-hero {
    min-height: 85svh;
    padding-top: 10rem;
    padding-bottom: 6rem;
  }

  .t-diag-pasos {
    grid-template-columns: 1fr;
  }

  .t-diag-items {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CÓMO TRABAJAMOS — Estilos específicos
   ============================================================ */

/* Liberar contenedor en plantilla ancho completo */
.page-template-template-full-width .entry-content,
.page-template-template-full-width .site-main,
.page-template-template-full-width #primary {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Row layouts — asegurar ancho completo */
.page-template-template-full-width .wp-block-kadence-rowlayout {
  width: 100% !important;
  max-width: 100% !important;
}

/* Separadores naranja en secciones oscuras */
.page-template-template-full-width .wp-block-separator.has-background {
  border: none !important;
  height: 2px !important;
  margin-block: 2rem !important;
}

/* Columnas de ejes — fondo oscuro */
.kb-row-id-ct-s4 .wp-block-kadence-column {
  background-color: var(--t-azul) !important;
  padding: 3.2rem 2.4rem !important;
}

/* Grilla de ejes — separadores de 1px */
.kb-row-id-ct-s4 .kt-row-layout-inner {
  gap: 1px !important;
  background-color: rgba(255,255,255,0.1) !important;
}

/* Tres niveles — columnas */
.kb-row-id-ct-s5 .wp-block-column {
  background-color: var(--t-blanco) !important;
}

/* CTA final — centrar contenido */
.kb-row-id-ct-s6 .kt-inside-inner-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* Imagen del esquema — centrar y limitar ancho */
.kb-row-id-ct-s3 .wp-block-image img {
  max-width: 600px !important;
  width: 100% !important;
  margin: 4rem auto !important;
  display: block !important;
}

/* Responsive */
@media (max-width: 768px) {
  .kb-row-id-ct-s4 .kt-row-layout-inner {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   CÓMO TRABAJAMOS — Fix de estructura
   ============================================================ */

/* Liberar el contenedor principal */
.page-template-template-full-width .site-main,
.page-template-template-full-width #primary,
.page-template-template-full-width .entry-content,
.page-template-template-full-width .content-area {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Row layouts toman ancho completo */
.kb-row-layout-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Contenido interno centrado con ancho máximo */
.kb-row-layout-wrap .wp-block-kadence-column {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 40px;
  width: 100%;
  box-sizing: border-box;
}

/* Hero — narrow */
.kb-row-id-ct-hero .wp-block-kadence-column {
  max-width: 1290px;
}

/* Secciones narrow */
.kb-row-id-ct-s2 .wp-block-kadence-column {
  max-width: 760px;
}

.kb-row-id-ct-s6 .wp-block-kadence-column {
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Sección ejes — grid de 3 */
.kb-row-id-ct-s4 .wp-block-kadence-column {
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: rgba(255,255,255,0.1);
  padding: 0;
}

/* Cada eje individual */
.kb-row-id-ct-s4 .kb-section-dir-horizontal {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .kb-row-layout-wrap .wp-block-kadence-column {
    padding-inline: 24px;
  }

  .kb-row-id-ct-s4 .wp-block-kadence-column {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CÓMO TRABAJAMOS — Fix por IDs de Kadence
   ============================================================ */

/* Padding de secciones — override de los defaults de Kadence */
#kt-layout-idct-hero > .kt-row-column-wrap {
  padding-top: 140px !important;
  padding-bottom: 140px !important;
}

#kt-layout-idct-s2 > .kt-row-column-wrap,
#kt-layout-idct-s3 > .kt-row-column-wrap,
#kt-layout-idct-s4 > .kt-row-column-wrap,
#kt-layout-idct-s5 > .kt-row-column-wrap,
#kt-layout-idct-s6 > .kt-row-column-wrap {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

/* Hero — centrar y limitar ancho del contenido */
#kt-layout-idct-hero > .kt-row-column-wrap > .wp-block-kadence-column {
  max-width: 1290px !important;
  margin-inline: auto !important;
  padding-inline: 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Secciones narrow — s2 y s6 */
#kt-layout-idct-s2 .kt-row-layout-inner,
#kt-layout-idct-s6 .kt-row-layout-inner {
  max-width: 760px !important;
  margin-inline: auto !important;
  padding-inline: 40px !important;
}

/* Secciones wide — s3, s4, s5 */
#kt-layout-idct-s3 .kt-row-layout-inner,
#kt-layout-idct-s4 .kt-row-layout-inner,
#kt-layout-idct-s5 .kt-row-layout-inner {
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: 40px !important;
}

/* Sección ejes — grid de 3 columnas */
#kt-layout-idct-s4 > .kt-row-column-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  background-color: rgba(255,255,255,0.1) !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: 40px !important;
}

/* Columnas de ejes — fondo y padding */
.kadence-columnct-s4-c1 > .kt-inside-inner-col,
.kadence-columnct-s4-c2 > .kt-inside-inner-col,
.kadence-columnct-s4-c3 > .kt-inside-inner-col {
  background-color: var(--t-azul) !important;
  padding: 3.2rem 2.4rem !important;
}

/* CTA final — centrar */
.kadence-columnct-s6-c1 > .kt-inside-inner-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* Entry content boxed — liberar */
.page-template-template-full-width .entry-content-wrap {
  padding: 0 !important;
}

.page-template-template-full-width .content-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
  #kt-layout-idct-s4 > .kt-row-column-wrap {
    grid-template-columns: 1fr !important;
  }

  #kt-layout-idct-hero > .kt-row-column-wrap,
  #kt-layout-idct-s2 > .kt-row-column-wrap,
  #kt-layout-idct-s3 > .kt-row-column-wrap,
  #kt-layout-idct-s5 > .kt-row-column-wrap,
  #kt-layout-idct-s6 > .kt-row-column-wrap {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

/* ============================================================
   CÓMO TRABAJAMOS — Template PHP
   ============================================================ */

.t-ct-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.t-ct-hero__title {
  font-family: var(--t-font-display);
  font-size: clamp(3.2rem, 5vw, 6rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--t-blanco);
  margin-top: 2rem;
  margin-bottom: 3.2rem;
}

.t-ct-hero__intro {
  font-family: var(--t-font-body);
  font-size: var(--t-size-lg);
  line-height: 1.75;
  color: var(--t-gris);
  max-width: 56ch;
}

.t-ct-sistema h2,
.t-ct-esquema h2 {
  font-size: clamp(2.8rem, 3.5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.t-ct-sistema .t-prose p {
  font-size: var(--t-size-md);
  line-height: 1.85;
  color: var(--t-azul);
  margin-bottom: 2rem;
  max-width: 62ch;
}

.t-ct-esquema__intro {
  font-family: var(--t-font-body);
  font-size: var(--t-size-md);
  line-height: 1.75;
  color: var(--t-azul);
  max-width: 62ch;
  margin-bottom: 2rem;
}

/* Ejes */
.t-ct-ejes__grid {
  gap: 1px;
  background-color: rgba(255,255,255,0.1);
}

.t-ct-eje {
  background-color: var(--t-azul);
  padding: 3.2rem 2.4rem;
}

.t-ct-eje__title {
  font-family: var(--t-font-display);
  font-size: var(--t-size-xl);
  font-weight: 500;
  color: var(--t-blanco);
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
}

.t-ct-eje__sub {
  font-family: var(--t-font-body);
  font-size: var(--t-size-sm);
  color: var(--t-gris);
  opacity: 0.7;
  margin-bottom: 0;
}

.t-ct-eje .t-divider {
  margin-block: 2rem;
}

.t-ct-eje__text {
  font-family: var(--t-font-body);
  font-size: var(--t-size-base);
  line-height: 1.7;
  color: var(--t-gris);
  margin-bottom: 1.6rem;
}

/* Niveles */
.t-ct-niveles__intro {
  margin-bottom: var(--t-space-lg);
}

.t-ct-niveles__intro h2 {
  font-size: clamp(2.8rem, 3.5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.t-ct-niveles__sub {
  font-family: var(--t-font-body);
  font-size: var(--t-size-md);
  color: var(--t-azul);
  line-height: 1.7;
  max-width: 58ch;
}

.t-ct-nivel {
  padding: 3.2rem;
  border-top: 2px solid var(--t-naranja);
  background-color: rgba(42,59,69,0.04);
}

.t-ct-nivel__num {
  display: block;
  font-family: var(--t-font-display);
  font-size: 6.4rem;
  font-weight: 300;
  color: var(--t-azul);
  opacity: 0.12;
  line-height: 1;
  margin-bottom: 1.6rem;
  letter-spacing: -0.04em;
}

.t-ct-nivel__title {
  font-family: var(--t-font-display);
  font-size: var(--t-size-lg);
  font-weight: 500;
  color: var(--t-azul);
  margin-bottom: 1.2rem;
}

.t-ct-nivel__text {
  font-family: var(--t-font-body);
  font-size: var(--t-size-base);
  line-height: 1.7;
  color: var(--t-azul);
}

/* CTA */
.t-ct-cta__btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.t-ct-cta__link {
  font-family: var(--t-font-display);
  font-size: var(--t-size-sm);
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color var(--t-duration) var(--t-ease);
}

.t-ct-cta__link:hover {
  color: var(--t-blanco);
}

@media (max-width: 768px) {
  .t-ct-hero {
    min-height: 80svh;
    padding-top: 10rem;
  }
  .t-ct-ejes__grid {
    grid-template-columns: 1fr;
  }
}

/* Esquema — dos columnas */
.t-ct-esquema__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--t-space-lg);
  align-items: center;
  margin-bottom: var(--t-space-lg);
}

.t-ct-esquema__texto h2 {
  font-size: clamp(2.8rem, 3.5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.t-ct-esquema__intro {
  font-family: var(--t-font-body);
  font-size: var(--t-size-md);
  line-height: 1.75;
  color: var(--t-gris);
  max-width: 52ch;
}

@media (max-width: 768px) {
  .t-ct-esquema__row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CONTACTO — Estilos específicos
   ============================================================ */

.t-contacto-hero {
  min-height: 50vh;
  display: flex;
  align-items: center;
}

.t-contacto-hero__title {
  font-family: var(--t-font-display);
  font-size: clamp(4rem, 7vw, 8rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--t-blanco);
  margin-top: 2rem;
  margin-bottom: 2.4rem;
}

.t-contacto-hero__intro {
  font-family: var(--t-font-body);
  font-size: var(--t-size-lg);
  line-height: 1.7;
  color: var(--t-gris);
  max-width: 48ch;
}

/* Vías de contacto */
.t-contacto-vias__grid {
  gap: var(--t-space-md);
}

.t-via {
  display: flex;
  flex-direction: column;
  padding: 3.2rem;
  border-top: 2px solid var(--t-naranja);
  background-color: rgba(42,59,69,0.03);
  text-decoration: none;
  transition: background-color var(--t-duration) var(--t-ease),
              transform var(--t-duration) var(--t-ease);
}

.t-via:hover {
  background-color: rgba(42,59,69,0.07);
  transform: translateY(-3px);
  text-decoration: none;
}

.t-via__icono {
  margin-bottom: 2rem;
}

.t-via__icono img {
  width: 75px;
 
  object-fit: contain;
}

.t-via__title {
  font-family: var(--t-font-display);
  font-size: var(--t-size-lg);
  font-weight: 500;
  color: var(--t-azul);
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}

.t-via__text {
  font-family: var(--t-font-body);
  font-size: var(--t-size-base);
  line-height: 1.7;
  color: var(--t-azul);
  flex-grow: 1;
  margin-bottom: 2rem;
}

.t-via__cta {
  font-family: var(--t-font-display);
  font-size: var(--t-size-sm);
  font-weight: 500;
  color: var(--t-naranja);
  letter-spacing: 0.04em;
  transition: color var(--t-duration) var(--t-ease);
}

.t-via:hover .t-via__cta {
  color: var(--t-azul);
}

/* Formulario */
.t-contacto-form h2 {
  font-size: clamp(2.8rem, 3.5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.t-contacto-form__sub {
  font-family: var(--t-font-body);
  font-size: var(--t-size-md);
  line-height: 1.75;
  color: var(--t-azul);
  max-width: 58ch;
  margin-bottom: var(--t-space-md);
}

.t-contacto-form__wrap {
  margin-top: var(--t-space-md);
}

/* Override WPForms para que respete el sistema de diseño */
.t-contacto-form__wrap .wpforms-form .wpforms-field input,
.t-contacto-form__wrap .wpforms-form .wpforms-field textarea,
.t-contacto-form__wrap .wpforms-form .wpforms-field select {
  font-family: var(--t-font-body) !important;
  font-size: var(--t-size-base) !important;
  border: 1px solid rgba(42,59,69,0.2) !important;
  border-radius: 2px !important;
  padding: 1.2rem 1.6rem !important;
  color: var(--t-azul) !important;
  background-color: var(--t-blanco) !important;
  transition: border-color var(--t-duration) var(--t-ease) !important;
}

.t-contacto-form__wrap .wpforms-form .wpforms-field input:focus,
.t-contacto-form__wrap .wpforms-form .wpforms-field textarea:focus {
  border-color: var(--t-naranja) !important;
  outline: none !important;
}

.t-contacto-form__wrap .wpforms-form .wpforms-field label {
  font-family: var(--t-font-display) !important;
  font-size: var(--t-size-sm) !important;
  font-weight: 500 !important;
  color: var(--t-azul) !important;
  letter-spacing: 0.04em !important;
}

.t-contacto-form__wrap .wpforms-form .wpforms-submit-container .wpforms-submit {
  font-family: var(--t-font-display) !important;
  font-size: var(--t-size-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background-color: var(--t-naranja) !important;
  color: var(--t-blanco) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 1rem 3rem 2.5rem 3rem !important;
  cursor: pointer !important;
  transition: background-color var(--t-duration) var(--t-ease) !important;
}

.t-contacto-form__wrap .wpforms-form .wpforms-submit-container .wpforms-submit:hover {
  background-color: var(--t-azul) !important;
}

@media (max-width: 768px) {
  .t-contacto-hero {
    min-height: 60svh;
    padding-top: 10rem;
  }

  .t-contacto-vias__grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   RESPONSIVE — Ajustes tipográficos mobile
   ============================================================ */

@media (max-width: 768px) {

  /* Párrafos de lectura */
  .t-prose p,
  .t-ct-sistema .t-prose p,
  .t-nos-origen .t-prose p,
  .t-nos-mirada__intro .t-prose p,
  .t-diag-promesa .t-prose p {
    font-size: var(--t-size-base) !important; /* 18px */
    line-height: 1.75 !important;
  }
	
	 /* Labels */
  .t-label {
    font-size: 1rem !important;
    letter-spacing: 0.12em !important;
  }

  /* Párrafos de secciones */
  .t-hero__intro,
  .t-ct-hero__intro,
  .t-nos-hero__intro,
  .t-diag-hero__intro,
  .t-contacto-hero__intro,
  .t-metodo__sub,
  .t-ejes__sub,
  .t-ct-esquema__intro,
  .t-ct-niveles__sub {
    font-size: var(--t-size-base) !important;
  }

  /* Textos de bloques */
  .t-eje__text,
  .t-ct-eje__text,
  .t-movimiento__text,
  .t-paso__text,
  .t-diag-item__text,
  .t-ct-nivel__text,
  .t-via__text {
    font-size: 1.6rem !important;
    line-height: 1.7 !important;
  }

  /* CTA subtextos */
  .t-cta-final__sub,
  .t-diag-cta__sub,
  .t-contacto-form__sub {
    font-size: var(--t-size-base) !important;
  }

}
@media (max-width: 1024px) and (min-width: 769px) {
  .t-prose p,
  .t-hero__intro,
  .t-ct-hero__intro {
    font-size: 1.9rem !important;
  }
}