/* ============================================================
   Tensoria Digital · Home
   Concepto: "Estructura en tensión" — nodos y líneas tensas
   que conectan las piezas del negocio en un solo sistema.
   Paleta clara: papel azulado, tinta ultramar, señal naranja.
   ============================================================ */

.td-home{
  --td-paper:#f4f5fa;
  --td-paper-deep:#eceef7;
  --td-white:#ffffff;
  --td-ink:#10173a;
  --td-ink-soft:#4c5578;
  --td-blue:#2337e4;
  --td-blue-deep:#17227f;
  --td-blue-tint:rgba(35,55,228,.08);
  --td-signal:#e8500a;
  --td-line:rgba(16,23,58,.14);
  --td-line-soft:rgba(16,23,58,.08);
  --td-radius:14px;

  position:relative;
  background:var(--td-paper);
  color:var(--td-ink);
  font-family:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  font-size:1rem;
  line-height:1.65;
}

.td-home ::selection{
  background:var(--td-blue);
  color:#ffffff;
}

.td-home h1,
.td-home h2,
.td-home h3{
  margin:0;
  font-family:"Bricolage Grotesque","Instrument Sans","Segoe UI",sans-serif;
  color:var(--td-ink);
}

.td-home a:focus-visible,
.td-home button:focus-visible,
.td-home input:focus-visible,
.td-home select:focus-visible,
.td-home textarea:focus-visible{
  outline:2px solid var(--td-blue);
  outline-offset:3px;
}

/* Barra de progreso de scroll (hook #scrollProgress) */
.progress-bar{
  position:fixed;
  top:0;
  left:0;
  z-index:120;
  width:0;
  height:2px;
  background:linear-gradient(90deg, var(--td-blue, #2337e4), #e8500a);
}

/* Header: en la home el sitio es claro; la barra queda en tinta sólida */
.site-header{
  background:rgba(16,23,58,.97);
  backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.site-header.is-scrolled{
  background:rgba(16,23,58,.99);
  box-shadow:0 10px 30px rgba(16,23,58,.18);
}

.site-header::after{
  background:linear-gradient(90deg, transparent, rgba(35,55,228,.5), transparent);
}

.site-nav__cta.button--primary{
  border-radius:10px;
  background:#2337e4;
  box-shadow:0 10px 24px rgba(35,55,228,.28);
}

.site-nav__cta.button--primary:hover,
.site-nav__cta.button--primary:focus-visible{
  background:#4356ff;
}

/* ---------- Utilidades compartidas ---------- */

.td-home .reveal-on-scroll{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}

.td-home .reveal-on-scroll.is-visible{
  opacity:1;
  transform:none;
}

.td-eyebrow{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--td-ink-soft);
}

.td-eyebrow__node{
  position:relative;
  display:inline-block;
  width:34px;
  height:1px;
  background:var(--td-ink);
  flex-shrink:0;
}

.td-eyebrow__node::after{
  content:"";
  position:absolute;
  top:50%;
  right:-3px;
  width:7px;
  height:7px;
  border-radius:50%;
  transform:translateY(-50%);
  background:var(--td-blue);
}

.td-home .button{
  border-radius:10px;
  min-height:3.1rem;
  padding:.2rem 1.5rem;
  font-family:"Instrument Sans","Segoe UI",sans-serif;
  font-weight:600;
  letter-spacing:.01em;
}

.td-button--primary{
  color:#ffffff;
  background:var(--td-blue);
  box-shadow:0 10px 24px rgba(35,55,228,.22);
}

.td-button--primary:hover,
.td-button--primary:focus-visible{
  background:var(--td-blue-deep);
  box-shadow:0 14px 28px rgba(23,34,127,.26);
}

.td-button--ghost{
  color:var(--td-ink);
  border:1px solid var(--td-line);
  background:var(--td-white);
}

.td-button--ghost:hover,
.td-button--ghost:focus-visible{
  border-color:var(--td-ink);
}

.td-arrow-link{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  width:max-content;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--td-blue);
  border-bottom:1px solid transparent;
  transition:gap .25s ease, color .25s ease, border-color .25s ease;
}

.td-arrow-link:hover,
.td-arrow-link:focus-visible{
  gap:.95rem;
  color:var(--td-blue-deep);
  border-color:currentColor;
}

.td-arrow-link svg{
  flex-shrink:0;
}

/* ---------- Hero ---------- */

.td-hero{
  position:relative;
  overflow:hidden;
  padding:6.5rem 0 3.5rem;
}

/* Campo tensor vivo: fondo animado detrás del hero (canvas + glow) */
.td-hero__field{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}

.td-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(60% 65% at 82% 22%, rgba(35,55,228,.10), transparent 60%),
    radial-gradient(45% 55% at 12% 90%, rgba(232,80,10,.05), transparent 70%);
}

.td-hero > .container{
  position:relative;
  z-index:2;
}

.td-hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(360px, .95fr);
  gap:3.5rem;
  align-items:center;
}

.td-hero__copy{
  display:grid;
  gap:1.6rem;
}

.td-hero__copy h1{
  display:grid;
  gap:.35rem;
  letter-spacing:-.02em;
}

.td-hero__line-a{
  font-size:clamp(1.35rem, 2.4vw, 2rem);
  font-weight:400;
  color:var(--td-ink-soft);
}

.td-hero__line-b{
  font-size:clamp(2.6rem, 5.4vw, 4.6rem);
  font-weight:550;
  line-height:1.02;
  letter-spacing:-.025em;
  color:var(--td-blue);
}

.td-hero__lead{
  margin:0;
  max-width:34rem;
  font-size:1.08rem;
  line-height:1.8;
  color:var(--td-ink-soft);
}

.td-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  padding-top:.2rem;
}

/* Demo operativa principal */
.td-hero__diagram{
  position:relative;
  margin:0;
  padding:0;
  border:0;
  border-radius:16px;
  background:transparent;
}

/* Métricas como lectura técnica */
.td-meter{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1.5rem;
  margin:3.5rem 0 0;
  padding:1.6rem 0 0;
  border-top:1px solid var(--td-line);
}

.td-meter__item{
  position:relative;
  display:grid;
  gap:.35rem;
  padding-left:1rem;
}

.td-meter__item::before{
  content:"";
  position:absolute;
  top:.85rem;
  left:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--td-blue);
}

.td-meter__item dd{
  order:-1;
  margin:0;
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-feature-settings:"tnum" 1;
  font-size:2.1rem;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--td-ink);
}

.td-meter__item dt{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.7rem;
  letter-spacing:.06em;
  line-height:1.5;
  text-transform:uppercase;
  color:var(--td-ink-soft);
}

/* ---------- Secciones ---------- */

.td-section{
  padding:6.25rem 0;
  background:var(--td-white);
}

.td-section--tinted{
  /* Era var(--td-paper): exactamente el mismo color que el fondo de .td-home,
     asi que la alternancia de bandas no se veia y solo quedaban dos filetes
     de 1px. --td-paper-deep es lo que se pretendia. */
  background:var(--td-paper-deep);
  border-top:1px solid var(--td-line-soft);
  border-bottom:1px solid var(--td-line-soft);
}

.td-section__shell{
  display:grid;
  gap:3.5rem;
}

.td-section__head{
  display:grid;
  gap:1.15rem;
  max-width:46rem;
}

.td-section__head h2{
  font-size:clamp(2rem, 3.6vw, 3.3rem);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.025em;
}

.td-section__lead{
  margin:0;
  max-width:54ch;
  color:var(--td-ink-soft);
  line-height:1.75;
}

/* ---------- Servicios: índice + paneles ---------- */

.td-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-top:1px solid var(--td-line);
  border-bottom:1px solid var(--td-line);
}

.td-tab{
  position:relative;
  flex:1 1 200px;
  display:grid;
  gap:.25rem;
  padding:1.1rem 1.2rem 1.2rem;
  border:0;
  border-left:1px solid var(--td-line-soft);
  background:transparent;
  text-align:left;
  cursor:pointer;
  transition:background-color .25s ease;
}

.td-tab:first-child{
  border-left:0;
}

.td-tab::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-1px;
  height:2px;
  background:var(--td-blue);
  transition:right .3s cubic-bezier(.22,1,.36,1);
}

.td-tab__eyebrow{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--td-ink-soft);
}

.td-tab__title{
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-size:1.05rem;
  font-weight:600;
  color:var(--td-ink);
}

.td-tab:hover,
.td-tab:focus-visible{
  background:var(--td-blue-tint);
}

.td-tab.is-active::after{
  right:0;
}

.td-tab.is-active .td-tab__eyebrow{
  color:var(--td-blue);
}

.td-panel{
  display:none;
  grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  gap:3rem;
  align-items:center;
}

.td-panel.is-active{
  display:grid;
}

.td-panel__schematic{
  margin:0;
  padding:0;
  border:0;
  border-radius:16px;
  background:transparent;
}

.td-panel__schematic figcaption{
  margin-top:1.2rem;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--td-ink-soft);
}

.td-panel__body{
  display:grid;
  gap:1.1rem;
}

.td-panel__body h3{
  font-size:clamp(1.7rem, 2.6vw, 2.4rem);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.025em;
}

.td-panel__summary{
  margin:0;
  color:var(--td-blue-deep);
  font-weight:500;
  line-height:1.6;
}

.td-panel__desc{
  margin:0;
  color:var(--td-ink-soft);
  line-height:1.75;
}

.td-panel__features{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.55rem 1.4rem;
  margin:0;
  padding:0;
  list-style:none;
}

.td-panel__features li{
  position:relative;
  padding-left:1.1rem;
  font-size:.92rem;
  color:var(--td-ink);
}

.td-panel__features li::before{
  content:"";
  position:absolute;
  top:.55em;
  left:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--td-blue);
}

.td-panel__stack{
  margin:0;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--td-ink-soft);
}

/* ---------- Proceso: la única sección numerada (es una secuencia real) ---------- */

.td-process{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:2.4rem 2rem;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:none;
}

.td-process__step{
  position:relative;
  display:grid;
  gap:.55rem;
  padding-top:1.4rem;
  border-top:1px solid var(--td-line);
}

.td-process__step::before{
  content:"";
  position:absolute;
  top:-4px;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--td-blue);
}

.td-process__num{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.74rem;
  letter-spacing:.14em;
  color:var(--td-blue);
}

.td-process__step h3{
  font-size:1.3rem;
  font-weight:500;
  letter-spacing:-.015em;
}

.td-process__step p{
  margin:0;
  font-size:.95rem;
  color:var(--td-ink-soft);
  line-height:1.7;
}

/* ---------- Casos ---------- */

.td-cases{
  display:grid;
  gap:1.2rem;
}

.td-case{
  display:grid;
  gap:1.6rem;
  padding:2rem;
  border:1px solid var(--td-line-soft);
  border-radius:var(--td-radius);
  background:var(--td-paper);
  transition:border-color .25s ease, transform .25s ease;
}

.td-case:hover{
  border-color:rgba(35,55,228,.35);
  transform:translateY(-3px);
}

.td-case__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.5rem;
}

.td-case__rubro{
  margin:0 0 .4rem;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--td-blue);
}

.td-case__head h3{
  font-size:1.55rem;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.05;
}

.td-case__servicio{
  margin:.45rem 0 0;
  font-size:.86rem;
  color:var(--td-ink-soft);
}

.td-case__tiempo{
  flex-shrink:0;
  padding:.4rem .75rem;
  border:1px solid var(--td-line);
  border-radius:8px;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.68rem;
  letter-spacing:.05em;
  color:var(--td-ink-soft);
  background:var(--td-white);
}

.td-case__flow{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.5rem;
}

.td-case__stage{
  position:relative;
  display:grid;
  gap:.5rem;
  align-content:start;
  padding-top:1rem;
  border-top:1px solid var(--td-line);
}

.td-case__stage::before{
  content:"";
  position:absolute;
  top:-3.5px;
  left:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--td-ink);
}

.td-case__stage--result::before{
  background:var(--td-signal);
}

.td-case__stage small{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.66rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--td-ink-soft);
}

.td-case__stage p{
  margin:0;
  font-size:.93rem;
  color:var(--td-ink);
  line-height:1.65;
}

.td-case__stage ul{
  display:grid;
  gap:.4rem;
  margin:0;
  padding:0;
  list-style:none;
}

.td-case__stage ul li{
  position:relative;
  padding-left:1rem;
  font-size:.93rem;
  font-weight:500;
  color:var(--td-ink);
}

.td-case__stage ul li::before{
  content:"+";
  position:absolute;
  left:0;
  color:var(--td-signal);
  font-weight:600;
}

/* ---------- Testimonios ---------- */

.td-quotes{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.2rem;
}

.td-quote{
  display:grid;
  gap:1.4rem;
  align-content:space-between;
  margin:0;
  padding:1.8rem;
  border:1px solid var(--td-line-soft);
  border-radius:var(--td-radius);
  background:var(--td-white);
}

.td-quote::before{
  content:"“";
  font-family:"Bricolage Grotesque","Georgia",serif;
  font-size:3.4rem;
  font-weight:600;
  line-height:.6;
  color:var(--td-blue);
}

.td-quote p{
  margin:0;
  color:var(--td-ink);
  line-height:1.75;
}

.td-quote footer{
  display:grid;
  gap:.15rem;
  padding-top:1rem;
  border-top:1px solid var(--td-line-soft);
}

.td-quote footer strong{
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-weight:600;
  color:var(--td-ink);
}

.td-quote footer span{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--td-ink-soft);
}

/* ---------- Catálogo de soluciones ---------- */

.td-catalog{
  display:grid;
}

.td-catalog__row{
  display:grid;
  grid-template-columns:190px minmax(0, 1fr);
  gap:2.75rem;
  padding:3.25rem 0;
  border-top:1px solid var(--td-line);
}

.td-catalog__row:last-child{
  border-bottom:1px solid var(--td-line);
}

.td-catalog__id{
  display:grid;
  gap:.7rem;
  align-content:start;
}

.td-catalog__index{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-feature-settings:"tnum" 1;
  font-size:.8rem;
  letter-spacing:.1em;
  color:var(--td-blue);
}

.td-catalog__category{
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-size:1.05rem;
  font-weight:500;
  color:var(--td-ink);
}

.td-catalog__badge{
  width:max-content;
  padding:.3rem .65rem;
  border:1px solid var(--td-line);
  border-radius:8px;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--td-ink-soft);
}

.td-catalog__content{
  display:grid;
  gap:.85rem;
  max-width:44rem;
}

.td-catalog__eyebrow{
  margin:0;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--td-ink-soft);
}

.td-catalog__content h3{
  font-size:clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.05;
}

.td-catalog__lead{
  margin:0;
  color:var(--td-ink);
  line-height:1.7;
}

.td-catalog__note{
  margin:0;
  padding-left:1.1rem;
  border-left:2px solid var(--td-blue);
  font-size:.92rem;
  color:var(--td-ink-soft);
  line-height:1.7;
}

.td-catalog__attrs{
  margin:0;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--td-ink-soft);
}

/* ---------- Contacto ---------- */

.td-contact{
  background:var(--td-paper);
  border-top:1px solid var(--td-line-soft);
}

.td-contact__grid{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:3rem;
  align-items:start;
}

.td-contact__copy{
  display:grid;
  gap:1.2rem;
}

.td-contact__copy h2{
  font-size:clamp(2rem, 3.4vw, 3.2rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.03em;
}

.td-contact__steps{
  display:grid;
  gap:.9rem;
  margin:0;
  padding:0 0 0 1.2rem;
  color:var(--td-ink);
}

.td-contact__steps li{
  padding-left:.4rem;
  line-height:1.65;
}

.td-contact__steps li::marker{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.8rem;
  color:var(--td-blue);
}

.td-contact__channels{
  display:grid;
  gap:.5rem;
  padding-top:1.2rem;
  border-top:1px solid var(--td-line);
}

.td-contact__channels a{
  width:max-content;
  font-weight:600;
  color:var(--td-blue-deep);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}

.td-contact__channels a:hover,
.td-contact__channels a:focus-visible{
  border-color:currentColor;
}

.td-contact__channels span{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.74rem;
  letter-spacing:.06em;
  color:var(--td-ink-soft);
}

.td-contact__panel{
  padding:2.2rem;
  border:1px solid var(--td-line-soft);
  border-radius:var(--td-radius);
  background:var(--td-white);
  box-shadow:0 20px 44px rgba(16,23,58,.07);
}

.td-contact__panel h3{
  margin:0 0 .3rem;
  font-size:1.45rem;
  font-weight:500;
  letter-spacing:-.015em;
}

.td-contact__panel > p{
  margin:0 0 1.4rem;
  color:var(--td-ink-soft);
}

.td-proposal-card{
  position:relative;
  display:grid;
  gap:1.25rem;
  overflow:hidden;
  padding:2.35rem;
  background:
    linear-gradient(rgba(143,162,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,162,255,.05) 1px,transparent 1px),
    linear-gradient(145deg,#101735,#080d23);
  background-size:24px 24px,24px 24px,auto;
  color:#f4f6ff;
  box-shadow:0 28px 58px rgba(16,23,58,.18);
}

.td-proposal-card::after{
  content:"";
  position:absolute;
  top:-7rem;
  right:-5rem;
  width:16rem;
  height:16rem;
  border-radius:50%;
  background:radial-gradient(circle,rgba(35,55,228,.42),transparent 68%);
  pointer-events:none;
}

.td-proposal-card__meta{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.td-proposal-card__meta span{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:#9aa8ff;
}

.td-proposal-card__meta i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2cc27e;
  box-shadow:0 0 0 4px rgba(44,194,126,.12);
}

.td-proposal-card__meta small{
  color:#aeb8d6;
  font:inherit;
}

.td-proposal-card__index{
  position:relative;
  z-index:1;
  margin:.35rem 0 0!important;
  color:#8290b8!important;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.62rem;
  letter-spacing:.08em;
}

.td-contact__panel.td-proposal-card h3{
  position:relative;
  z-index:1;
  max-width:13ch;
  margin:0;
  color:#fff;
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-size:clamp(2rem,3.7vw,3.1rem);
  line-height:.98;
  letter-spacing:-.035em;
}

.td-contact__panel.td-proposal-card > p:not(.td-proposal-card__index){
  position:relative;
  z-index:1;
  max-width:54ch;
  margin:0;
  color:#c5cde4;
  line-height:1.7;
}

.td-proposal-card__signals{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:.35rem 0;
  padding:0;
  border-block:1px solid rgba(146,166,255,.15);
  list-style:none;
}

.td-proposal-card__signals li{
  padding:.9rem .7rem;
  border-left:1px solid rgba(146,166,255,.15);
  color:#dbe0f2;
  font-size:.72rem;
  line-height:1.45;
}

.td-proposal-card__signals li:first-child{
  padding-left:0;
  border-left:0;
}

.td-proposal-card .button,
.td-proposal-card__contact{
  position:relative;
  z-index:1;
}

.td-proposal-card .button{
  width:max-content;
}

.td-proposal-card__contact{
  width:max-content;
  color:#b8c2df;
  font-size:.76rem;
  text-decoration:underline;
  text-underline-offset:4px;
}

.td-proposal-card__contact:hover,
.td-proposal-card__contact:focus-visible{
  color:#fff;
}

.td-proposal-card a:focus-visible{
  outline-color:#fff;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px){
  .td-hero__grid,
  .td-panel,
  .td-contact__grid{
    grid-template-columns:1fr;
  }

  .td-hero{
    padding-top:5.5rem;
  }

  .td-hero__diagram{
    max-width:560px;
  }

  .td-meter,
  .td-process{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .td-quotes{
    grid-template-columns:1fr;
  }

  .td-catalog__row{
    grid-template-columns:1fr;
    gap:1.4rem;
  }

  .td-catalog__id{
    grid-auto-flow:column;
    justify-content:start;
    align-items:center;
    gap:1rem;
  }
}

@media (max-width: 720px){
  .td-section,
  .td-hero{
    padding:4rem 0;
  }

  .td-hero{
    padding-top:5rem;
  }

  .td-hero__actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .td-home .button{
    width:100%;
  }

  .td-catalog__id{
    grid-auto-flow:row;
    grid-template-columns:minmax(0,1fr);
    justify-items:start;
    min-width:0;
  }

  .td-meter,
  .td-process,
  .td-case__flow,
  .td-panel__features{
    grid-template-columns:1fr;
  }

  .td-tabs{
    flex-direction:column;
    border:1px solid var(--td-line);
    border-radius:var(--td-radius);
    overflow:hidden;
  }

  .td-tab{
    border-left:0;
    border-top:1px solid var(--td-line-soft);
  }

  .td-tab:first-child{
    border-top:0;
  }

  .td-tab::after{
    top:0;
    bottom:0;
    left:0;
    right:auto;
    width:2px;
    height:auto;
    transition:none;
  }

  .td-tab.is-active::after{
    right:auto;
  }

  .td-case__head{
    flex-direction:column;
  }

  .td-contact__panel{
    padding:1.5rem;
  }

  .td-proposal-card__meta{
    align-items:flex-start;
    flex-direction:column;
  }

  .td-proposal-card__signals{
    grid-template-columns:1fr;
  }

  .td-proposal-card__signals li,
  .td-proposal-card__signals li:first-child{
    padding:.75rem 0;
    border-left:0;
    border-top:1px solid rgba(146,166,255,.12);
  }

  .td-proposal-card__signals li:first-child{
    border-top:0;
  }
}

/* ---------- Accesibilidad: movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce){
  .td-home .reveal-on-scroll{
    opacity:1;
    transform:none;
    transition:none;
  }

  .td-case:hover{
    transform:none;
  }
}

/* ============================================================
   Persiana de sectores
   Una lámina abierta y el resto asomando. Al elegir otra la cola
   rota: la elegida pasa al frente, la anterior al final.
   ============================================================ */

.td-louver__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:4rem;
  margin-bottom:2.4rem;
}

.td-louver__title{
  margin:0;
  max-width:30ch;
  font-size:clamp(1.5rem, 2.4vw, 2rem);
  font-weight:600;
  line-height:1.28;
  letter-spacing:-.03em;
}

/* Titular a dos tonos: la primera frase afirma, la segunda explica. */
.td-louver__title span{ color:var(--td-ink-soft); }

.td-louver__nav{
  display:flex;
  align-items:center;
  gap:1.2rem;
  flex:none;
}

.td-louver__count{
  margin:0;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--td-ink-soft);
  font-variant-numeric:tabular-nums;
}

.td-louver__arrows{ display:flex; gap:.6rem; }

.td-louver__arrow{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--td-line);
  background:var(--td-white);
  color:var(--td-ink);
  cursor:pointer;
  transition:border-color .24s ease, background .24s ease;
}

.td-louver__arrow:hover{
  border-color:rgba(16,23,58,.4);
  background:var(--td-paper);
}

/* ── La fila ───────────────────────────────────────────────── */
.td-louver__row{
  display:flex;
  gap:.7rem;
  align-items:stretch;
}

.td-louver__slat{
  position:relative;
  height:480px;
  min-width:0;
  border-radius:12px;
  overflow:hidden;
  background:var(--td-paper-deep);
  /* contain aisla el interior de cada lamina del reflow de la fila. Sin
     esto, cada fotograma del ancho recalcula tambien la foto, el velo y el
     texto de las doce, y ahi es donde el movimiento raspa. */
  contain:layout paint;
  /* 520ms con salida suave: a 300 se siente brusco, pasando de 600 cansa. */
  transition:flex .52s cubic-bezier(.22,.61,.36,1),
             margin .52s cubic-bezier(.22,.61,.36,1),
             opacity .42s ease, filter .38s ease;
  flex:0 0 88px;
  filter:saturate(.82) brightness(.97);
}

/* ── El pliegue ────────────────────────────────────────────────────────
   Lamina plegada a cero. El margen negativo cancela el gap que el flex le
   seguiria reservando: sin eso, una lamina de ancho 0 igual ocupa .7rem y
   la fila da un saltito al terminar el giro.

   Las copias del anillo (las seis que el JS clona) estan siempre aqui salvo
   durante la fase 2, que es cuando entran creciendo por la derecha. */
.td-louver__slat--nula{
  flex:0 0 0 !important;
  margin-right:-.7rem;
  opacity:0;
  pointer-events:none;
}

/* Mientras se mueve, la fila no acepta hover: el cursor quedaria peleando
   con la animacion sobre laminas que se estan yendo. */
.td-louver__row--anima{ pointer-events:none; }

/* Una sola curva, y de salida pura.

   Medido contra la referencia de Stripe fotograma a fotograma: alli el
   movimiento arranca en su MAXIMO de velocidad y no hace mas que frenar
   -- 43, 41, 36, 36, 28, 27, 24, 17, 16, 10, 8, 5, 4, 2 -- sin un solo
   repunte. Es lo que hace que se lea como algo con inercia y no como una
   caja que se recoloca.

   .16,1,.3,1 es eso: sale disparada y frena largo. Una curva con arranque
   suave (ease-in-out) da el perfil contrario -- sube, se mantiene, baja --
   y se siente pesada al principio y brusca al final.

   Y una sola: encadenar dos tramos no puede dar continuidad, porque las
   transiciones CSS no conservan la velocidad al reencadenarse. */
.td-louver__row--anima .td-louver__slat{
  transition:flex .62s cubic-bezier(.16,1,.3,1),
             margin .62s cubic-bezier(.16,1,.3,1),
             opacity .4s ease, filter .3s ease;
}

/* Un frame sin transicion. Al confirmar el giro el DOM se reordena y las
   laminas quedan pintadas donde ya estaban; sin congelar, el navegador
   animaria de nuevo hacia la posicion que ya ocupan y se ve un rebote. */
.td-louver__row--quieta .td-louver__slat{ transition:none; }

/* flex-basis 88px, NO auto, y esto importa mas de lo que parece.

   `auto` no es interpolable: el navegador no puede animar de 88px a auto, asi
   que la base SALTABA en el primer fotograma de cada apertura y lo unico que
   animaba de verdad era flex-grow. Ese salto es un tiron que estaba en la
   base desde el principio, por debajo de cualquier ajuste de curva.

   Con la base fija en 88px el ancho abierto lo da entero flex-grow repartiendo
   el espacio libre: 88 + 496 = 584px, el mismo de antes, pero ahora todo el
   recorrido es interpolable. A mitad de camino las dos laminas tienen grow .5
   y se reparten el hueco a partes iguales: esas son las dos anchas a medias. */
.td-louver__slat.is-open{
  flex:1 0 88px;
  filter:none;
}

/* Al pasar el cursor una lámina cerrada gana 74px. No se abre del todo a
   propósito: si lo hiciera, cruzar la fila con el ratón provocaría un salto
   continuo de todas las láminas. */
.td-louver__slat:not(.is-open):hover{
  flex:0 0 162px;
  filter:none;
}

/* La abierta ya ocupa todo el hueco libre, así que solo puede crecer si las
   cerradas ceden: 18px cada una. Se usa :has() porque el cursor está en la
   hermana, no en el elemento que cambia; donde no exista, no pasa nada. */
.td-louver__row:has(.td-louver__slat.is-open:hover) .td-louver__slat:not(.is-open){
  flex:0 0 70px;
}

.td-louver__slat.is-open:hover{ filter:brightness(1.02); }

/* Zona pulsable a pantalla completa de la lámina, por encima de la imagen y
   por debajo de las etiquetas. */
.td-louver__hit{
  position:absolute;
  inset:0;
  z-index:2;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}

.td-louver__slat.is-open .td-louver__hit{ cursor:default; }

.td-louver__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Dos capas. El fondo esta siempre debajo, asi que nunca hay un hueco a
   medio cruce; el mockup se disuelve encima cuando la lamina se abre.
   El retardo es a proposito: primero empieza a haber sitio, despues
   aparece lo que hay que leer. */
.td-louver__img--mockup{
  opacity:0;
  transition:opacity .34s ease .08s;
}
.td-louver__slat.is-open .td-louver__img--mockup{ opacity:1; }

.td-louver__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  color:var(--td-ink-soft);
  background:repeating-linear-gradient(135deg, var(--td-paper) 0 15px, var(--td-paper-deep) 15px 30px);
}

.td-louver__placeholder span{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  padding:0 .5rem;
}

.td-louver__veil{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(11,17,40,0) 42%, rgba(11,17,40,.78) 100%);
}

/* Nombre en vertical mientras está cerrada: recurso editorial clásico y la
   única forma de leer una etiqueta en 88px de ancho. */
.td-louver__vertical{
  position:absolute;
  left:50%;
  top:26px;
  transform:translateX(-50%);
  margin:0;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
  transition:opacity .38s ease;
  z-index:3;
}

.td-louver__slat:not(.is-open):hover .td-louver__vertical{ opacity:.55; }
.td-louver__slat.is-open .td-louver__vertical{ display:none; }

/* Nombre horizontal que asoma con el cursor: confirma que se puede pulsar. */
.td-louver__peek{
  position:absolute;
  left:18px;
  right:18px;
  bottom:20px;
  margin:0;
  font-size:.98rem;
  font-weight:600;
  letter-spacing:-.02em;
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .36s ease, transform .36s ease;
  z-index:3;
}

.td-louver__slat:not(.is-open):hover .td-louver__peek{ opacity:1; transform:none; }
.td-louver__slat.is-open .td-louver__peek{ display:none; }

.td-louver__label{
  position:absolute;
  left:26px;
  right:26px;
  bottom:22px;
  z-index:3;
  opacity:0;
  transition:opacity .3s ease .12s;
  pointer-events:none;
}

.td-louver__slat.is-open .td-louver__label{ opacity:1; }

.td-louver__index{
  margin:0 0 .45rem;
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.68rem;
  letter-spacing:.14em;
  color:rgba(255,255,255,.6);
}

.td-louver__name{
  margin:0;
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-size:1.5rem;
  font-weight:500;
  line-height:1.16;
  letter-spacing:-.025em;
  color:#fff;
}

/* ── Pie ───────────────────────────────────────────────────── */
/* El texto vive FUERA de la imagen, como en una revista. */
.td-louver__foot{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:5rem;
  margin-top:1.7rem;
}

.td-louver__copy{
  margin:0;
  max-width:52ch;
  font-size:1.02rem;
  line-height:1.7;
  color:var(--td-ink-soft);
}

.td-louver__copy strong{ color:var(--td-ink); font-weight:600; }

.td-louver__cta{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  flex:none;
  font-size:1rem;
  font-weight:600;
  color:var(--td-ink);
  padding-bottom:.35rem;
  border-bottom:1.5px solid var(--td-ink);
}

/* En movil la persiana no cabe: seis laminas de 62px mas una ancha se ven
   apenuscadas y ninguna alcanza a mostrar nada. Debajo de 60rem se convierte
   en un carrusel de scroll con anclaje.

   Es un cambio de mecanismo, no solo de medidas: aqui el movimiento lo lleva
   el scroll nativo del sistema -- con su inercia y su rebote, lo mas fluido
   que hay en un tactil -- en vez de animar anchos. El JS deja de rotar la
   cola y pasa a seguir cual tarjeta esta centrada. */
@media (max-width: 60rem){
  .td-louver__head,
  .td-louver__foot{ flex-direction:column; gap:1.6rem; }
  .td-louver__name{ font-size:1.25rem; }

  .td-louver__row{
    gap:.9rem;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .td-louver__row::-webkit-scrollbar{ display:none; }

  /* 78% deja asomar las vecinas por los dos lados: es lo que le dice al dedo
     que hay mas, sin necesidad de flechas ni de puntos. */
  .td-louver__slat,
  .td-louver__slat.is-open,
  .td-louver__slat:not(.is-open):hover{
    flex:0 0 78%;
    max-width:330px;
    height:420px;
    filter:none;
    scroll-snap-align:center;
    transition:none;
  }

  /* Cada tarjeta se explica sola, asi que sobra el texto vertical de lomo y
     el asomo del hover: en tactil no hay hover. */
  .td-louver__vertical,
  .td-louver__peek{ display:none; }
  .td-louver__label{ opacity:1; }

  /* Aqui no se gira, asi que las copias del anillo sobran. Y hay que
     ocultarlas de forma explicita: el flex de arriba lleva !important y las
     sacaria a tamano completo. */
  .td-louver__slat--clon{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .td-louver__slat--clon{ display:none; }
  .td-louver__img--mockup,
  .td-louver__slat,
  .td-louver__vertical,
  .td-louver__peek,
  .td-louver__label,
  .td-louver__arrow{ transition:none; }
}