/* ============================================================================
   TRAZO DECORATIVO · el bloque calmadeser/trazo
   ----------------------------------------------------------------------------
   Nuestra capa. El marcado lo pinta inc/bloque-trazo.php.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   EL APILADO, que es de lo que va todo esto.
   ----------------------------------------------------------------------------
   Lo pedido: el trazo por encima del FONDO de la sección y por debajo de todo
   lo demás —texto, títulos, fotos, símbolos—.

   .cmp declara container-type, y eso convierte la sección en su propio contexto
   de apilado. Por eso el bloque tiene que vivir DENTRO de la sección y no entre
   dos: desde fuera no hay z-index que lo ponga encima del fondo de una sección
   y debajo de su texto a la vez.

   ⚠️ Lo que container-type NO hace, por mucho que lo parezca, es convertir la
   sección en BLOQUE CONTENEDOR de sus hijos en posición absoluta. Medido: sin
   `position: relative` el offsetParent del trazo salía BODY. Está explicado
   abajo, en la regla que lo arregla.

       fondo de la sección      .cmp
         trazo                  z-index 0
           contenido            .cmp__inner, z-index 1

   ⚠️ .cmp__inner NO tenía posición ni z-index. Sin las dos líneas de abajo el
   contenido se pinta en el flujo normal y el trazo, que está posicionado, le
   pasa por encima: taparía el texto. Es la mitad que no se ve al leer el PHP.
   ------------------------------------------------------------------------- */
.cmp__inner {
  position: relative;
  z-index: 1;
}

/* La sección recorta en HORIZONTAL, y solo si lleva un trazo.
   ----------------------------------------------------------------------------
   Un trazo pegado al borde con giro se sale de la ventana y alarga el documento
   a lo ancho: aparece barra de scroll horizontal en todo el sitio.

   `:has()` acota la regla a las secciones que llevan trazo. Sin él habría que
   ponerlo a .cmp entero y afectaría a secciones que no tienen nada que recortar.

   ⚠️ SOLO el eje horizontal. Unificar los dos con `overflow: clip` +
   `overflow-clip-margin` está probado y sale mal: Chrome no soporta los
   longhands por lado, el margen se aplica a los cuatro y reaparece el scroll
   horizontal que esto viene a matar. Está contado en overrides.css.

   En vertical se deja `visible` a propósito, para que un trazo pueda asomar por
   arriba o por abajo. Asomará POR DEBAJO del fondo de la sección siguiente, que
   es opaco: ese es el límite conocido de meter el trazo dentro de la sección, y
   no tiene arreglo mientras .cmp use container-type. */
/* ⚠️ `position: relative` HACE FALTA, y no es redundante con container-type.
   ----------------------------------------------------------------------------
   Di por hecho que el `contain` que implica container-type ya convertía la
   sección en bloque contenedor de sus hijos en posición absoluta. MEDIDO, aquí
   no lo hace: el offsetParent del trazo salía BODY.

   Dos consecuencias, y las dos se veían:

     · «sube 40px» subía 116, que son 40 más los 76 de la cabecera: el trazo
       contaba desde el documento y no desde la sección.
     · el `overflow-x: clip` de abajo no lo recortaba, y aparecían 61px de
       scroll horizontal en toda la página. Un elemento absoluto solo lo recorta
       un ancestro que esté en su cadena de bloque contenedor, y la sección no
       lo estaba.

   Con esto la sección sí es el bloque contenedor, el desplazamiento cuenta
   desde su borde de arriba —que es lo acordado— y el recorte funciona. */
.cmp:has(.c-trazo-deco) {
  position: relative;
  overflow-x: clip;
  /* Contexto de apilado explícito: con z-index -1 el trazo debe quedar por
     debajo del contenido pero POR ENCIMA del fondo de esta sección, no del de
     la página. container-type ya lo daba; esto lo hace explícito. */
  isolation: isolate;
}

/* ----------------------------------------------------------------------------
   El trazo
   ------------------------------------------------------------------------- */
.c-trazo-deco {
  position: absolute;
  /* Desde ARRIBA de la sección, que es lo acordado. En negativo sube. */
  top: var(--cds-trazo-y, 0);
  /* Negativo: por debajo de TODO el contenido de la sección, tenga o no
     posición. La sección es contexto de apilado (container-type), así que el
     fondo de la sección sigue debajo del trazo. Pedido el 2026-09-16. */
  z-index: -1;
  width: var(--cds-trazo-ancho, 34%);
  /* Decoración: no roba clics a lo que tapa ni se puede seleccionar. */
  pointer-events: none;
  user-select: none;
}

/* Al borde de la VENTANA, no al de la columna de texto. Las secciones son a
   sangre, así que su borde y el de la ventana son el mismo. */
.c-trazo-deco--izquierda { left: 0; }
.c-trazo-deco--derecha { right: 0; }

.c-trazo-deco__svg {
  display: block;
  width: 100%;
  height: auto;
  /* El giro va en el SVG y no en el contenedor: así `top`, `left` y `right`
     siguen midiendo desde el borde real y no desde la caja ya girada. */
  transform: rotate(var(--cds-trazo-giro, 0deg));
  transform-origin: center;
}

/* ----------------------------------------------------------------------------
   El dibujado, copiado del trazo del hero
   ----------------------------------------------------------------------------
   `pathLength="1"` lo pone el PHP en cada <path>, así que `dasharray: 1 1` vale
   para los diez trazos por largas que sean sus curvas. El offset negativo
   dibuja desde el extremo contrario al del positivo.

   Se ata al scroll del DOCUMENTO con `scroll()` y no a la entrada del elemento
   con `view()`: un trazo que ya se ve al cargar nunca «entra», y con `view()`
   la línea se quedaba sin dibujar. Es el mismo fallo que tuvo el hero.
   ------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
   El dibujado
   ----------------------------------------------------------------------------
   `pathLength="1"` lo pone el PHP en cada <path>, así que con `dasharray: 1 1`
   hay un trazo de largo 1 y un hueco de largo 1, y eso vale para los diez por
   largas que sean sus curvas.

   El offset lo mueve assets/js/trazo.js en cada fotograma, según lo que el
   trazo lleve recorrido de pantalla: de ±1 (sin dibujar) a 0 (entero). El signo
   decide por qué extremo empieza, y eso es el interruptor «al revés».

   ⚠️ AQUÍ NO HAY `animation-timeline`, aunque haga justo esto en dos líneas.
   Firefox ENTIENDE la propiedad y no la implementa sin activar una preferencia:
   `CSS.supports` contesta que sí, la cronología nace inactiva, la animación se
   queda en su primer fotograma y el trazo DESAPARECE. Está contado entero en
   la cabecera de assets/js/trazo.js.

   ⚠️ EL ESTADO BASE ES «DIBUJADO», y es deliberado. Es el JavaScript quien lo
   esconde para animarlo. Al revés sería más corto y estaría mal: si el script
   no llega a correr, un trazo escondido se queda invisible para siempre.
   ------------------------------------------------------------------------- */
.c-trazo-deco__linea {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}

/* Quien pide menos movimiento ve el trazo entero y quieto. El JS ya se sale
   antes de tocar nada; esto lo cubre también si la preferencia cambia con la
   página abierta. */
@media (prefers-reduced-motion: reduce) {
  .c-trazo-deco .c-trazo-deco__linea {
    stroke-dashoffset: 0 !important;
    animation: none;
  }
}

/* ----------------------------------------------------------------------------
   En el editor
   ----------------------------------------------------------------------------
   Se coloca igual que en el front para que la página se vea como se verá. El
   precio es que un elemento en posición absoluta y por debajo del contenido es
   incómodo de seleccionar con el ratón: se marca con un borde discontinuo al
   pasar por encima, y siempre queda la vista de lista.
   ------------------------------------------------------------------------- */
.editor-styles-wrapper .c-trazo-deco {
  pointer-events: auto;
}

/* En el editor el SVG va dentro de un <div> que React rellena, y no suelto como
   en el front. El envoltorio no debe meterse en medio del tamaño. */
.c-trazo-deco__envoltorio {
  display: contents;
}

.editor-styles-wrapper .c-trazo-deco:hover {
  outline: 1px dashed var(--wp--preset--color--border-strong);
  outline-offset: 4px;
}

/* Sin trazo escogido, el marcador de posición necesita sitio y no puede ir
   pegado a un borde en tamaño cero. */
.editor-styles-wrapper .c-trazo-deco:has(.components-placeholder) {
  position: relative;
  width: 100%;
}

/* ----------------------------------------------------------------------------
   CTA CON TRAZO · un grupo `c-cta-trazo` con el botón y un trazo a su derecha
   ----------------------------------------------------------------------------
   El trazo cuenta desde su bloque contenedor. Dentro de este grupo, que tiene
   posición, «derecha» es el borde derecho de la columna de texto y «arriba» es
   la altura del botón, no el principio de la sección. Así el trazo acompaña al
   botón aunque el texto de encima cambie de largo. Primera cita, 2026-10-07. */
.c-cta-trazo {
  position: relative;
  margin-block-start: var(--wp--preset--spacing--60);
}