/* Tiscadi v0.6 — componentes del sitio. Mobile-first (360 px en adelante).
   Las mismas clases sirven al prototipo y a las plantillas de Elementor. */

/* ---------- Compatibilidad Elementor: los contenedores no agregan espacio propio */
.e-con.ts-chrome, .e-con.ts-main, .e-con.ts-section, .e-con.ts-shell,
.e-con.ts-hero__text, .e-con.ts-split__head, .e-con.ts-split__body,
.e-con.ts-founder__body, .e-con.ts-cta__text, .e-con.ts-contact__intro, .e-con.ts-legal {
  --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0;
  --gap: 0; --row-gap: 0; --column-gap: 0;
  --width: 100%; --content-width: 100%;
}
.e-con.ts-section { padding-block: var(--ts-space-section); }
.e-con.ts-shell { display: grid; }
.elementor-widget:not(:last-child) { margin-block-end: 0; }
[class*="ts-"] .elementor-heading-title {
  margin: 0; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit;
}
.elementor-widget-text-editor p:last-child, .ts-copy p:last-child { margin-block-end: 0; }
.elementor-widget-container { width: 100%; }

/* ---------- Foco visible con contraste AA en fondos claros y oscuros */
:focus-visible { outline: 3px solid var(--ts-color-amber-text); outline-offset: 3px; }
.ts-section--ink :focus-visible, .ts-footer :focus-visible { outline-color: var(--ts-color-amber); }

/* ---------- Base */
body { background: var(--ts-color-cream); }
.ts-shell {
  display: grid;
  width: min(100% - (2 * var(--ts-space-gutter)), var(--ts-content-max));
  margin-inline: auto;
  align-items: start;
}
.ts-section { padding-block: var(--ts-space-section); }
.ts-section + .ts-section:not(.ts-section--ink) { border-block-start: 1px solid rgb(50 42 34 / 0.12); }
.ts-section--ink { color: var(--ts-color-cream); background: var(--ts-color-ink); }
.ts-skip {
  position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 20;
  padding: 0.75rem 1rem; color: var(--ts-color-cream); background: var(--ts-color-ink);
}
.ts-skip:focus { inset-block-start: 1rem; }

.ts-eyebrow {
  margin: 0 0 1.25rem;
  color: var(--ts-color-amber-text);
  font-family: var(--ts-font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ts-section--ink .ts-eyebrow, .ts-footer .ts-eyebrow { color: var(--ts-color-amber); }

.ts-display {
  max-width: 15ch;
  margin: 0 0 1.5rem;
  font-size: var(--ts-font-size-h1);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: var(--ts-line-tight);
}
.ts-display--page { max-width: 18ch; font-size: clamp(2.5rem, 5.6vw, 5rem); }
.ts-heading {
  max-width: 20ch;
  margin: 0 0 1.5rem;
  font-size: clamp(1.9rem, 3.6vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.ts-heading--large { font-size: clamp(2.2rem, 4.6vw, 4.25rem); max-width: 18ch; }
.ts-lead { max-width: 58ch; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.55; }
.ts-copy { max-width: var(--ts-copy-max); }
.ts-copy--large { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; }
.ts-closing { margin-block-start: 2rem; }
.ts-closing a, .ts-copy a { font-weight: 600; text-decoration-color: var(--ts-color-amber); text-decoration-thickness: 2px; }

.ts-num {
  display: block;
  margin-block-end: 0.75rem;
  color: var(--ts-color-amber-text);
  font-family: var(--ts-font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.ts-section--ink .ts-num { color: var(--ts-color-amber); }

/* ---------- Botones y enlaces */
.ts-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin: 2rem 0 0; }
.ts-button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: var(--ts-radius-sm);
  color: var(--ts-color-ink);
  background: var(--ts-color-amber);
  font: 600 1rem/1.2 var(--ts-font-display);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ts-transition), transform var(--ts-transition);
}
.ts-button:hover { background: #e0913f; }
.ts-button:active { transform: translateY(1px); }
.ts-link {
  display: inline-flex;
  min-height: var(--ts-touch-min);
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ts-color-amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.ts-link:hover { text-decoration-color: currentColor; }

/* ---------- Encabezado */
.ts-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background: rgb(247 243 236 / 0.96);
  border-block-end: 1px solid rgb(50 42 34 / 0.1);
}
.ts-header__bar {
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.ts-logo { display: inline-flex; min-height: var(--ts-touch-min); align-items: center; }
.ts-logo img { width: clamp(8.5rem, 22vw, 11rem); height: auto; }
.ts-nav { display: none; align-items: center; gap: 2rem; }
.ts-nav ul, .ts-menu ul, .ts-footer ul { margin: 0; padding: 0; list-style: none; }
.ts-nav ul { display: flex; gap: 1.75rem; }
.ts-nav a:not(.ts-button), .ts-menu a {
  display: inline-flex; min-height: var(--ts-touch-min); align-items: center; text-decoration: none;
}
.ts-nav a[aria-current="page"], .ts-menu a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--ts-color-amber);
  text-decoration-thickness: 2px; text-underline-offset: 0.45em;
}
.ts-nav .ts-button { min-height: var(--ts-touch-min); padding-block: 0.6rem; }
.ts-menu summary {
  display: inline-flex; min-height: var(--ts-touch-min); align-items: center; gap: 0.6rem;
  padding-inline: 0.25rem; font-weight: 600; list-style: none; cursor: pointer;
}
.ts-menu summary::-webkit-details-marker { display: none; }
.ts-menu__icon, .ts-menu__icon::before, .ts-menu__icon::after {
  display: block; width: 1.25rem; height: 2px; background: currentColor; content: "";
}
.ts-menu__icon { position: relative; }
.ts-menu__icon::before { position: absolute; inset-block-start: -6px; }
.ts-menu__icon::after { position: absolute; inset-block-start: 6px; }
.ts-menu[open] .ts-menu__icon { background: transparent; }
.ts-menu[open] .ts-menu__icon::before { inset-block-start: 0; transform: rotate(45deg); }
.ts-menu[open] .ts-menu__icon::after { inset-block-start: 0; transform: rotate(-45deg); }
.ts-menu nav {
  position: absolute; inset-inline: 0; inset-block-start: 100%;
  padding: 1rem var(--ts-space-gutter) 1.5rem;
  background: var(--ts-color-cream);
  border-block-end: 1px solid rgb(50 42 34 / 0.12);
}
.ts-menu li + li { border-block-start: 1px solid rgb(50 42 34 / 0.1); }
.ts-menu a { width: 100%; min-height: 3.25rem; font-size: 1.15rem; }

/* ---------- Hero y encabezados de página */
.ts-section--hero { padding-block-start: clamp(3rem, 7vw, 6rem); }
.ts-section--hero .ts-shell { gap: clamp(2.5rem, 5vw, 4rem); }
.ts-proof {
  max-width: 52ch;
  margin: 2.5rem 0 0;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid rgb(50 42 34 / 0.18);
  color: #5c5247;
  font-family: var(--ts-font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
}
.ts-section--ink .ts-proof { color: rgb(247 243 236 / 0.75); border-color: rgb(247 243 236 / 0.2); }
.ts-hero__figure { margin: 0; }
.ts-hero__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ts-radius-md); }
.ts-section--pagehead { padding-block: clamp(3rem, 8vw, 7rem) clamp(2.5rem, 6vw, 5rem); }

/* ---------- En corto + cadena */
.ts-section--define .ts-shell { gap: 1rem; }
.ts-chain {
  display: grid; margin: 2.5rem 0 0; padding: 0; list-style: none;
  border-block-start: 1px solid rgb(50 42 34 / 0.18);
}
.ts-chain li {
  display: flex; align-items: baseline; gap: 1rem; padding-block: 1rem;
  border-block-end: 1px solid rgb(50 42 34 / 0.18);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 500;
}
.ts-chain span { color: var(--ts-color-amber-text); font-family: var(--ts-font-mono); font-size: 0.8rem; font-weight: 700; }

/* ---------- Situaciones */
.ts-situations { margin: 2.5rem 0 0; padding: 0; list-style: none; border-block-start: 1px solid rgb(50 42 34 / 0.18); }
.ts-situation { display: grid; gap: 0.75rem; padding-block: 1.75rem; border-block-end: 1px solid rgb(50 42 34 / 0.18); }
.ts-situation p { margin: 0; }
.ts-situation__quote { font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.ts-situation__answer { max-width: 52ch; color: #5c5247; }

/* ---------- Fundador */
.ts-section--founder .ts-shell { gap: clamp(2rem, 5vw, 4.5rem); }
.ts-founder__photo { position: relative; margin: 0; max-width: 26rem; }
.ts-founder__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ts-radius-md); }
.ts-founder__photo--pending {
  display: grid; aspect-ratio: 4 / 5; place-content: center; gap: 1rem; text-align: center;
  border: 1px dashed currentColor; border-radius: var(--ts-radius-md); opacity: 0.85;
}
.ts-founder__initials { font-family: var(--ts-font-mono); font-size: clamp(3rem, 8vw, 5rem); font-weight: 700; letter-spacing: 0.08em; }
.ts-founder__photo figcaption { font-family: var(--ts-font-mono); font-size: 0.78rem; line-height: 1.5; }
.ts-quote { margin: 0 0 1.75rem; padding-inline-start: 1.25rem; border-inline-start: 3px solid var(--ts-color-amber); }
.ts-quote p { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; }
.ts-facts { display: grid; gap: 0; margin: 2rem 0 0; border-block-start: 1px solid rgb(50 42 34 / 0.18); }
.ts-facts div { display: grid; gap: 0.25rem; padding-block: 0.9rem; border-block-end: 1px solid rgb(50 42 34 / 0.18); }
.ts-facts dt { color: var(--ts-color-amber-text); font-family: var(--ts-font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ts-facts dd { margin: 0; }

/* ---------- Rejillas numeradas */
.ts-grid { display: grid; gap: 0; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.ts-grid li { padding-block: 1.75rem; border-block-start: 1px solid rgb(50 42 34 / 0.18); }
.ts-section--ink .ts-grid li, .ts-section--ink .ts-situation { border-color: rgb(247 243 236 / 0.2); }
.ts-grid h3, .ts-levels h3, .ts-next h3 { margin: 0 0 0.5rem; font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.ts-grid p, .ts-levels p, .ts-next p { margin: 0; max-width: 46ch; }
.ts-section:not(.ts-section--ink) .ts-grid p, .ts-levels p { color: #5c5247; }
.ts-section--ink .ts-grid p { color: rgb(247 243 236 / 0.8); }

/* ---------- Propuesta en cinco líneas */
.ts-proposal { margin: 2.5rem 0 0; padding: 0; list-style: none; counter-reset: none; }
.ts-proposal li {
  display: grid; gap: 0.35rem; padding-block: 1.25rem;
  border-block-start: 1px solid rgb(50 42 34 / 0.18);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.35;
}
.ts-proposal li:last-child { border-block-end: 1px solid rgb(50 42 34 / 0.18); }
.ts-proposal .ts-num { margin: 0; }
.ts-proposal strong { font-weight: 600; }
.ts-proposal span:not(.ts-num) { color: #5c5247; }

/* ---------- Niveles */
.ts-levels { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.ts-levels li { display: grid; gap: 0.25rem; padding-block: 1.5rem; border-block-start: 1px solid rgb(50 42 34 / 0.18); }

/* ---------- Preguntas frecuentes */
.ts-faq { margin-block-start: 2rem; border-block-start: 1px solid rgb(50 42 34 / 0.18); }
.ts-faq__item { border-block-end: 1px solid rgb(50 42 34 / 0.18); }
.ts-faq__item summary {
  display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1rem; cursor: pointer; list-style: none;
}
.ts-faq__item summary::-webkit-details-marker { display: none; }
.ts-faq__item summary::after { flex: none; content: "+"; color: var(--ts-color-amber-text); font: 700 1.5rem/1 var(--ts-font-mono); }
.ts-faq__item[open] summary::after { content: "–"; }
.ts-faq__q { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600; line-height: 1.3; }
.ts-faq__item p { max-width: 62ch; margin: 0 0 1.5rem; color: #5c5247; }

/* ---------- Manifiesto */
.ts-manifesto { max-width: 60ch; }
.ts-manifesto p { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: rgb(247 243 236 / 0.88); }
.ts-manifesto p:first-child { font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--ts-color-cream); }
.ts-manifesto p:last-child { color: var(--ts-color-amber); font-weight: 600; }

/* ---------- CTA */
.ts-section--cta .ts-shell { gap: 1rem; }
.ts-section--cta .ts-copy p { color: rgb(247 243 236 / 0.85); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.ts-cta__action .ts-actions { margin: 0; }

/* ---------- Conversemos */
.ts-subhead {
  margin: 2.5rem 0 0; color: var(--ts-color-amber-text); font-family: var(--ts-font-mono);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.ts-section--contact { padding-block-start: clamp(3rem, 7vw, 6rem); }
.ts-section--contact .ts-shell { gap: clamp(2.5rem, 5vw, 5rem); }
.ts-next { display: grid; gap: 1.25rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.ts-next li { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 0.75rem; }
.ts-next .ts-num { grid-row: span 2; margin: 0; padding-block-start: 0.2rem; }
.ts-form {
  display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid rgb(50 42 34 / 0.18); border-radius: var(--ts-radius-md); background: #fbf9f5;
}
.ts-field { display: grid; gap: 0.4rem; }
.ts-field label { font-weight: 600; }
.ts-field label span { color: #6b6156; font-weight: 400; }
.ts-field input, .ts-field textarea {
  width: 100%; min-height: 3rem; padding: 0.75rem 0.9rem;
  border: 1px solid #7d7266; border-radius: var(--ts-radius-sm);
  color: var(--ts-color-ink); background: #fff; font: inherit;
}
.ts-field textarea { min-height: 9rem; resize: vertical; }
.ts-field input:focus-visible, .ts-field textarea:focus-visible { outline: 3px solid var(--ts-color-amber); outline-offset: 1px; }
.ts-field--check { grid-template-columns: 1.5rem 1fr; align-items: start; gap: 0.75rem; }
.ts-field--check input { width: 1.25rem; min-height: 1.25rem; margin-block-start: 0.2rem; accent-color: var(--ts-color-ink); }
.ts-field--check label { font-weight: 400; font-size: 0.95rem; }
.ts-field--hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ts-form-error {
  padding: 1rem 1.25rem; border-inline-start: 3px solid #c05b3e; background: #f4e7e2;
}

/* ---------- Texto legal */
.ts-legal { max-width: 68ch; }
.ts-legal__title { margin: 2.5rem 0 0.75rem; font-size: 1.35rem; font-weight: 600; }
.ts-legal > :first-child { margin-block-start: 0; }

/* ---------- Pie */
.ts-footer { padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }
.ts-footer__grid { gap: 2.5rem; }
.ts-footer__brand img { width: 10rem; height: auto; margin-block-end: 1.5rem; }
.ts-footer__brand p { max-width: 48ch; color: rgb(247 243 236 / 0.8); font-size: 0.95rem; }
.ts-footer li { line-height: 1.4; }
.ts-footer a { display: inline-flex; min-height: var(--ts-touch-min); align-items: center; }
.ts-footer__legal {
  margin-block-start: 3rem; padding-block-start: 1.5rem;
  border-block-start: 1px solid rgb(247 243 236 / 0.18);
  color: rgb(247 243 236 / 0.65); font-family: var(--ts-font-mono); font-size: 0.78rem;
}

/* ---------- Prototipo: marcas de validación */
.ts-v { color: inherit; background: rgb(210 129 46 / 0.22); border-block-end: 1px dashed var(--ts-color-amber-text); }
.ts-proto-badge {
  position: fixed; inset-inline-start: 0.75rem; inset-block-end: 0.75rem; z-index: 30; margin: 0;
  padding: 0.45rem 0.7rem; border-radius: var(--ts-radius-sm);
  color: var(--ts-color-cream); background: rgb(50 42 34 / 0.92);
  font-family: var(--ts-font-mono); font-size: 0.7rem;
}
.ts-proto-badge .ts-v { color: var(--ts-color-cream); }

/* ---------- Tablet */
@media (min-width: 768px) {
  .ts-situation { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: baseline; }
  .ts-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .ts-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .ts-proposal li { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
  .ts-levels li { grid-template-columns: 3rem minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1.5rem; align-items: baseline; }
  .ts-levels .ts-num { margin: 0; }
  .ts-facts div { grid-template-columns: 9rem 1fr; gap: 1.5rem; align-items: baseline; }
  .ts-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-field--wide { grid-column: 1 / -1; }
  .ts-footer__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
  .ts-actions .ts-button { width: auto; }
}

/* ---------- Escritorio */
@media (min-width: 1024px) {
  .ts-nav { display: flex; }
  .ts-menu { display: none; }
  .ts-section--hero .ts-shell { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; column-gap: clamp(3rem, 5vw, 5rem); }
  .ts-section--hero .ts-display { font-size: clamp(3rem, 4.9vw, 5.1rem); max-width: 13ch; }
  .ts-hero__figure img { aspect-ratio: 4 / 5; }
  .ts-section--define .ts-shell { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 5rem; }
  .ts-section--founder .ts-shell { grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .ts-section--founder-full .ts-shell { grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1.25fr); }
  .ts-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ts-section--cta .ts-shell { grid-template-columns: minmax(0, 1.6fr) auto; align-items: end; column-gap: 4rem; }
  .ts-section--contact .ts-shell { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .ts-section--manifesto .ts-shell, .ts-section--proposal .ts-shell, .ts-section--levels .ts-shell,
  .ts-section--faq .ts-shell, .ts-section--steps .ts-shell, .ts-section--situations .ts-shell,
  .ts-section--principles .ts-shell, .ts-section--formats .ts-shell { max-width: var(--ts-content-max); }
}

@media (max-width: 479px) {
  .ts-actions { flex-direction: column; align-items: stretch; }
  .ts-actions .ts-button { width: 100%; }
  .ts-actions .ts-link { justify-content: center; }
  .ts-header .ts-actions { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-button { transition: none; }
}
