/* «De la tierra al lugar» — estilos del componente. Todo va bajo .tal; hereda --serif/--sans/--mono/--edge del sitio si existen. */
.tal {
  --tal-fondo: #f6f2e9;
  --tal-tinta: #10151c;
  --tal-tinta-suave: #4d5866;
  --tal-linea: #dcd6c8;
  --tal-bronce: #a9743c;          /* acento gráfico sobre marfil (3,6:1) */
  --tal-acento-texto: #8a5a2b;    /* acento para texto pequeño sobre marfil (5,2:1) */
  --tal-diag-trazo: #01193d;
  --tal-diag-suave: rgba(1, 25, 61, .3);
  --tal-diag-rejilla: rgba(1, 25, 61, .16);
  --tal-diag-tierra: rgba(1, 25, 61, .06);
  --tal-diag-cara-a: rgba(1, 25, 61, .1);
  --tal-diag-cara-b: rgba(1, 25, 61, .18);
  --tal-diag-tapa: rgba(1, 25, 61, .03);
  --tal-diag-oro: #a9743c;
  --tal-diag-oro-relleno: rgba(224, 179, 116, .4);
  --tal-rotulo: #4d5866;
  --tal-serif: var(--serif, "Source Serif 4", Georgia, "Times New Roman", serif);
  --tal-sans: var(--sans, "Source Sans 3", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --tal-mono: var(--mono, "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace);
  --tal-edge: var(--edge, clamp(20px, 5vw, 64px));
  --tal-dur: .42s;
  --tal-dur-trazo: .9s;
  --tal-ease: cubic-bezier(.16, 1, .3, 1);
  --tal-progreso: .25;
  background: var(--tal-fondo);
  color: var(--tal-tinta);
  font-family: var(--tal-sans);
  padding: clamp(56px, 8vw, 112px) var(--tal-edge);
}
.tal[data-tema="navy"] {
  --tal-fondo: #01193d;
  --tal-tinta: #f6f2e9;
  --tal-tinta-suave: rgba(246, 242, 233, .74);
  --tal-linea: rgba(246, 242, 233, .18);
  --tal-bronce: #e0b374;
  --tal-acento-texto: #e0b374;
  --tal-diag-trazo: #f6f2e9;
  --tal-diag-suave: rgba(246, 242, 233, .38);
  --tal-diag-rejilla: rgba(246, 242, 233, .14);
  --tal-diag-tierra: rgba(246, 242, 233, .05);
  --tal-diag-cara-a: rgba(246, 242, 233, .09);
  --tal-diag-cara-b: rgba(246, 242, 233, .17);
  --tal-diag-tapa: rgba(246, 242, 233, .04);
  --tal-diag-oro: #e0b374;
  --tal-diag-oro-relleno: rgba(224, 179, 116, .34);
  --tal-rotulo: rgba(246, 242, 233, .8);
}
.tal *, .tal *::before, .tal *::after { box-sizing: border-box; }

/* Cabecera */
.tal-cabecera { max-width: 1312px; margin: 0 auto 44px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px 48px; align-items: end; }
.tal-kicker { grid-column: 1 / -1; margin: 0; font: 400 12px/1.4 var(--tal-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tal-acento-texto); }
.tal-titulo { margin: 0; font: 400 clamp(36px, 4.6vw, 64px)/1.02 var(--tal-serif); letter-spacing: -.015em; text-wrap: balance; }
.tal-entrada { margin: 0 0 8px; font: 400 clamp(17px, 1.3vw, 20px)/1.5 var(--tal-sans); color: var(--tal-tinta-suave); max-width: 36ch; }

/* Cuerpo: etapas · texto · diagrama */
.tal-cuerpo { max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: minmax(196px, 244px) minmax(300px, 400px) minmax(0, 1fr); grid-template-areas: "etapas paneles figura"; gap: 0 clamp(28px, 4vw, 64px); align-items: start; }

/* Riel de etapas: la línea dorada avanza hasta la etapa activa */
.tal-etapas { grid-area: etapas; position: relative; display: flex; flex-direction: column; padding-left: 20px; }
.tal-etapas::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--tal-linea); }
.tal-etapas::after { content: ""; position: absolute; left: -1px; top: 0; width: 3px; height: calc(var(--tal-progreso) * 100%); background: var(--tal-bronce); transition: height var(--tal-dur) var(--tal-ease); }
.tal-tab { appearance: none; -webkit-appearance: none; background: none; border: 0; border-radius: 0; margin: 0; width: 100%; text-align: left; cursor: pointer; padding: 15px 10px 17px 12px; color: var(--tal-tinta-suave); font-family: var(--tal-sans); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: baseline; }
.tal-tab + .tal-tab { border-top: 1px solid var(--tal-linea); }
.tal-tab-n { grid-row: 1 / 3; font: 500 11px/1.3 var(--tal-mono); letter-spacing: .08em; color: var(--tal-tinta-suave); }
.tal-tab-nombre { font: 600 17px/1.2 var(--tal-sans); }
.tal-tab-verbo { font: 400 14px/1.35 var(--tal-sans); color: var(--tal-tinta-suave); }
.tal-tab:hover { color: var(--tal-tinta); }
.tal-tab.es-activa { color: var(--tal-tinta); }
.tal-tab.es-activa .tal-tab-n { color: var(--tal-acento-texto); }
.tal-tab:focus-visible { outline: 2px solid var(--tal-bronce); outline-offset: 2px; }

/* Paneles: todos ocupan la misma celda, así la altura no salta al cambiar */
.tal-paneles { grid-area: paneles; display: grid; }
.tal-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity var(--tal-dur) var(--tal-ease), transform var(--tal-dur) var(--tal-ease), visibility 0s linear var(--tal-dur); }
.tal-panel.es-activa { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.tal-panel-etapa { margin: 0 0 10px; font: 400 12px/1.4 var(--tal-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tal-acento-texto); }
.tal-panel-n { margin-right: 6px; }
.tal-panel-titulo { margin: 0 0 14px; font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--tal-serif); letter-spacing: -.01em; text-wrap: balance; }
.tal-panel-corto { margin: 0 0 12px; font: 400 17px/1.55 var(--tal-sans); }
.tal-panel-detalle { margin: 0 0 22px; font: 400 15px/1.6 var(--tal-sans); color: var(--tal-tinta-suave); }
.tal-resultado { margin: 0 0 26px; padding: 14px 0 0; border-top: 1px solid var(--tal-linea); display: grid; gap: 4px; }
.tal-resultado-rotulo { font: 500 11px/1.4 var(--tal-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tal-acento-texto); }
.tal-resultado-texto { font: 600 16px/1.45 var(--tal-sans); }
.tal-paso { display: flex; justify-content: space-between; gap: 12px; }
.tal-paso-btn { appearance: none; -webkit-appearance: none; background: none; border: 1px solid var(--tal-linea); border-radius: 0; padding: 10px 14px; min-height: 44px; font: 500 13px/1.2 var(--tal-sans); color: var(--tal-tinta); cursor: pointer; }
.tal-paso-btn:hover { border-color: var(--tal-tinta); }
.tal-paso-btn:focus-visible { outline: 2px solid var(--tal-bronce); outline-offset: 2px; }

/* Diagrama */
.tal-figura { grid-area: figura; align-self: center; margin: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tal-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.tal-svg line, .tal-svg polygon, .tal-svg ellipse, .tal-svg path { vector-effect: non-scaling-stroke; }
.tal-titulo-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.tal-leyenda { margin: 6px 0 0; font: 400 12px/1.5 var(--tal-mono); letter-spacing: .04em; color: var(--tal-tinta-suave); text-align: right; }
.tal-rejilla { fill: none; stroke: var(--tal-diag-rejilla); stroke-width: 2.2; stroke-linecap: round; }
.tal-svg [data-en] { opacity: 0; transition: opacity var(--tal-dur) var(--tal-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.tal-svg [data-en].es-visible { opacity: 1; }
.tal-trazo { fill: none; stroke: var(--tal-diag-trazo); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--tal-dur-trazo) var(--tal-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.es-visible .tal-trazo { stroke-dashoffset: 0; }
.tal-parcela { stroke-width: 1.7; }
.tal-parcela--estudio { stroke: var(--tal-diag-suave); stroke-dasharray: .012 .01; stroke-dashoffset: 0; }
.tal-tierra { fill: var(--tal-diag-tierra); }
.tal-via { stroke: var(--tal-diag-suave); stroke-width: 1.2; }
.tal-flujo { fill: none; stroke: var(--tal-diag-oro); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 3 11; animation: tal-flujo 7s linear infinite; }
.tal-anillo { fill: none; stroke: var(--tal-diag-suave); stroke-width: 1; stroke-dasharray: 2 6; }
.tal-demanda { fill: var(--tal-diag-oro); }
.tal-pin-base { fill: var(--tal-diag-oro-relleno); stroke: var(--tal-diag-oro); stroke-width: 1; }
.tal-pin { stroke: var(--tal-diag-oro); stroke-width: 1.6; }
.tal-pin-cabeza { fill: var(--tal-diag-oro); }
.tal-huella { stroke-width: 1.4; }
.tal-huella--requerimiento { stroke: var(--tal-diag-oro); stroke-width: 1.6; stroke-dasharray: .03 .018; stroke-dashoffset: 0; }
.tal-cota { fill: none; stroke: var(--tal-diag-oro); stroke-width: 1.2; }
.tal-cara { stroke: none; }
.tal-cara--a { fill: var(--tal-diag-cara-a); }
.tal-cara--b { fill: var(--tal-diag-cara-b); }
.tal-cara--tapa { fill: var(--tal-diag-tapa); }
.tal-arista { stroke-width: 1.5; }
.tal-modulo { fill: none; stroke: var(--tal-diag-trazo); stroke-width: 1; }
.tal-modulo--ocupado { fill: var(--tal-diag-oro-relleno); }
.tal-bucle { fill: none; stroke: var(--tal-diag-oro); stroke-width: 1.2; stroke-dasharray: 5 7; animation: tal-bucle 14s linear infinite; }
.tal-bucle-punta { fill: var(--tal-diag-oro); }
.tal-rotulo { font: 500 13px var(--tal-mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--tal-rotulo); }
@keyframes tal-flujo { to { stroke-dashoffset: -112; } }
@keyframes tal-bucle { to { stroke-dashoffset: -120; } }

/* El dibujo arranca cuando la sección entra en pantalla (lo marca el JS) */
.tal.tal--js:not(.tal--en-vista) .tal-svg [data-en] { opacity: 0; }
.tal.tal--js:not(.tal--en-vista) .tal-svg .tal-trazo { stroke-dashoffset: 1; }

/* Sin JavaScript: etapas apiladas y diagrama en su estado final */
.tal:not(.tal--js) .tal-etapas, .tal:not(.tal--js) .tal-paso { display: none; }
.tal:not(.tal--js) .tal-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "paneles figura"; }
.tal:not(.tal--js) .tal-paneles { display: grid; gap: 40px; }
.tal:not(.tal--js) .tal-panel { grid-area: auto; visibility: visible; opacity: 1; transform: none; }
.tal:not(.tal--js) .tal-svg [data-en~="4"] { opacity: 1; }
.tal:not(.tal--js) .tal-svg [data-en~="4"] .tal-trazo { stroke-dashoffset: 0; }

/* Tableta: etapas en fila, diagrama y texto lado a lado */
@media (max-width: 1099px) {
  .tal-rotulo { font-size: 16px; }
  .tal-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "etapas etapas" "figura paneles"; gap: 30px clamp(24px, 4vw, 48px); }
  .tal-etapas { flex-direction: row; padding: 0 0 14px; }
  .tal-etapas::before { top: auto; right: 0; bottom: 0; width: auto; height: 1px; }
  .tal-etapas::after { top: auto; left: 0; bottom: -1px; width: calc(var(--tal-progreso) * 100%); height: 3px; transition: width var(--tal-dur) var(--tal-ease); }
  .tal-tab { flex: 1 1 0; padding: 4px 12px 8px 0; }
  .tal-tab + .tal-tab { border-top: 0; border-left: 1px solid var(--tal-linea); padding-left: 12px; }
  .tal-tab-verbo { display: none; }
  .tal:not(.tal--js) .tal-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "figura" "paneles"; }
}

/* Móvil: etapas en 2 × 2, diagrama y luego el texto */
@media (max-width: 719px) {
  .tal { padding-top: 56px; padding-bottom: 64px; }
  .tal-cabecera { grid-template-columns: minmax(0, 1fr); margin-bottom: 28px; }
  .tal-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "etapas" "figura" "paneles"; gap: 20px; }
  .tal-etapas { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
  .tal-etapas::before, .tal-etapas::after { display: none; }
  .tal-tab, .tal-tab + .tal-tab { border: 0; border-top: 1px solid var(--tal-linea); padding: 10px 8px 12px 0; }
  .tal-tab.es-activa { box-shadow: inset 0 -3px 0 var(--tal-bronce); }
  .tal-tab-nombre { font-size: 15px; }
  .tal-leyenda { text-align: left; }
  .tal-rotulo { font-size: 21px; }
  .tal-paso-btn { flex: 1 1 0; padding: 10px 8px; }
}

/* Movimiento reducido: sin transiciones, sin dibujo progresivo, sin flujo */
@media (prefers-reduced-motion: reduce) {
  .tal *, .tal *::before, .tal *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .tal-trazo:not(.tal-parcela--estudio):not(.tal-huella--requerimiento) { stroke-dasharray: none; stroke-dashoffset: 0; }
  .tal-panel { transform: none; }
}