/* ════════════════════════════════════════════════════
   comun.css — ecoarte&medios: lo que comparten la página y el autorretrato
════════════════════════════════════════════════════ */

/* ── Sólo para lectores de pantalla ── */
.oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Paleta ── */
:root {
  --c1:  #b86549;  --c1-osc:  #874128;
  --c2:  #b88249;  --c2-osc:  #875928;
  --c3:  #b89749;  --c3-osc:  #876b28;
  --c4:  #b8af49;  --c4-osc:  #877f28;
  --c5:  #94a943;  --c5-osc:  #697b24;
  --c6:  #57993c;  --c6-osc:  #386f21;
  --c7:  #3e9c85;  --c7-osc:  #22715f;
  --c8:  #3d779b;  --c8-osc:  #215371;
  --c9:  #3b5195;  --c9-osc:  #20336b;
  --c10: #593992;  --c10-osc: #3b1f69;
  --c11: #9b3d90;  --c11-osc: #712167;
  --c12: #b0455d;  --c12-osc: #812639;
}

/* ── Frase con columnas entre corchetes (#manos y «escuchar» del autorretrato) ── */
.frase {
  --u: calc(1em / 9);
  display: flex; align-items: center; justify-content: center;
  font-size: min(2vw, 30px); font-weight: 500; line-height: 1;
  color: #000;
}
/* trazo: una máscara con zona opaca en el medio se corre de derecha a izquierda (aparece y se borra de izquierda a derecha) */
.js .frase {
  padding: calc(60 * var(--u)) calc(30 * var(--u));
  margin: calc(-60 * var(--u)) calc(-30 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 40%, #000 60%, transparent 70%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 40%, #000 60%, transparent 70%);
  -webkit-mask-size: 500% 100%; mask-size: 500% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position 1.1s cubic-bezier(.45, 0, .25, 1), mask-position 1.1s cubic-bezier(.45, 0, .25, 1);
}
.js .frase.entra { -webkit-mask-position: 50% 0; mask-position: 50% 0; }
.js .frase.sale { -webkit-mask-position: 0 0; mask-position: 0 0; transition-duration: .75s; }
.frase.quieta, .frase.quieta * { transition: none !important; }
.frase-tramo { display: flex; align-items: center; }
.frase-texto, .frase-caja {
  flex: none;
  height: calc(12.05 * var(--u)); line-height: calc(10.37 * var(--u));
  padding: 0 calc(3 * var(--u));
  white-space: nowrap;
}
.frase-texto { background: linear-gradient(90deg, var(--g1), var(--g2)); }
.frase-caja { background: var(--c); }
.frase-col { position: relative; flex: none; display: flex; flex-direction: column; }
.frase-col-der { align-items: flex-end; }
.frase-col-izq { align-items: flex-start; }
.frase-col::before {
  content: '';
  position: absolute; z-index: 1;
  top: calc(-3.13 * var(--u)); bottom: calc(-3.32 * var(--u));
  width: calc(2.37 * var(--u));
  border: var(--u) solid var(--c-osc);
}
.frase-col-der::before { right: calc(-.5 * var(--u)); border-left: 0; border-radius: 0 calc(2.37 * var(--u)) calc(2.37 * var(--u)) 0; }
.frase-col-izq::before { left: calc(-.5 * var(--u)); border-right: 0; border-radius: calc(2.37 * var(--u)) 0 0 calc(2.37 * var(--u)); }
.frase-op { display: flex; flex: none; }
.frase-arriba, .frase-abajo {
  width: 0; height: 0;
  opacity: 0;
  clip-path: inset(0 -100vmax);
  transition: height .75s var(--suave), opacity .75s var(--suave);
}
.frase-col-der .frase-op { justify-content: flex-end; }
.frase-arriba { align-items: flex-end; }
.frase-arriba .frase-caja { margin-bottom: calc(1.95 * var(--u)); }
.frase-abajo { align-items: flex-start; }
.frase-abajo .frase-caja { margin-top: calc(1.95 * var(--u)); }
.frase.abierta :is(.frase-arriba, .frase-abajo) {
  height: calc(14 * var(--u));
  opacity: 1;
  transition-delay: var(--d, 0s);
}

/* ── Columna centrada de ancho fijo y con barras a los lados («escuchar») ── */
.frase-col-centro { align-items: center; }
.frase-col-centro .frase-op,
.frase-col-centro :is(.frase-arriba, .frase-abajo) { width: calc(var(--ancho, 60) * var(--u)); justify-content: center; }
.frase-col-centro .frase-caja { width: 100%; text-align: center; }
/* corchetes a los dos lados: un trazo de 1u con los extremos curvos; recorta un degradado con los tonos de cada renglón */
.frase-col-barras::before, .frase-col-barras::after {
  content: '';
  position: absolute; z-index: 1;
  top: calc(-3.38 * var(--u)); bottom: calc(-3.58 * var(--u));
  width: calc(2.37 * var(--u)); height: auto;
  border: 0; border-radius: 0;
  background: var(--barra, var(--c));
  --r: calc(2.37 * var(--u));
  --arco: #0000 calc(var(--r) - var(--u) - .4px), #000 calc(var(--r) - var(--u)), #000 calc(var(--r) - .4px), #0000 var(--r);
  -webkit-mask:
    linear-gradient(#000 0 0) var(--lado-x) 50% / var(--u) calc(100% - 2 * var(--r) + 1px) no-repeat,
    radial-gradient(circle at var(--centro-x) 100%, var(--arco)) var(--lado-x) 0 / var(--r) var(--r) no-repeat,
    radial-gradient(circle at var(--centro-x) 0, var(--arco)) var(--lado-x) 100% / var(--r) var(--r) no-repeat;
  mask:
    linear-gradient(#000 0 0) var(--lado-x) 50% / var(--u) calc(100% - 2 * var(--r) + 1px) no-repeat,
    radial-gradient(circle at var(--centro-x) 100%, var(--arco)) var(--lado-x) 0 / var(--r) var(--r) no-repeat,
    radial-gradient(circle at var(--centro-x) 0, var(--arco)) var(--lado-x) 100% / var(--r) var(--r) no-repeat;
}
.frase-col-barras::before { --lado-x: 0; --centro-x: 100%; left: calc(-.5 * var(--u)); right: auto; }
.frase-col-barras::after { --lado-x: 100%; --centro-x: 0; right: calc(-.5 * var(--u)); left: auto; }

@media (prefers-reduced-motion: reduce) {
  .frase, .frase * { transition: none !important; }
}