/* =====================================================================
   04 · TRANSICIONES ENTRE SECCIONES
   REGLA DE ORO: la forma lleva el color de la sección de ARRIBA (--de)
   y el contenedor tiene el fondo de la sección de ABAJO (--a).
   El contenedor va ENTRE las dos secciones. Verificar SIEMPRE renderizado.

   <div class="trans trans--ola" style="--de:var(--c-oscuro); --a:var(--c-fondo)">
     <svg viewBox="0 0 1440 150" preserveAspectRatio="none" aria-hidden="true">
       <path d="M0,0 H1440 V60 C1080,150 720,20 360,90 C220,118 100,110 0,80 Z"/>
     </svg>
   </div>
   Todos los paths empiezan en M0,0 H1440 (rellenan ARRIBA) y la curva
   es el borde inferior.
   ===================================================================== */

.trans{
  position:relative; z-index:1; display:block; line-height:0;
  background:var(--a, var(--c-fondo));
  margin-top:-1px;                /* mata la línea de 1px de subpíxel */
}
.trans svg{ display:block; width:100%; height:var(--ola-h); }
.trans path.forma, .trans svg > path:not(.linea){ fill:var(--de, var(--c-oscuro)); }
.trans .linea{ fill:none; stroke:var(--c-acento); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.trans + section, .trans + .seccion{ margin-top:-1px; }

/* Variantes solo cambian la altura / el espejo; la forma va en el HTML */
.trans--baja svg{ height:clamp(40px, 5vw, 80px); }
.trans--espejo svg{ transform:scaleX(-1); }

/* Diagonal (sin SVG) */
.trans--diagonal{ height:clamp(50px, 7vw, 110px); }
.trans--diagonal::before{
  content:""; position:absolute; inset:0; background:var(--de);
  clip-path:polygon(0 0, 100% 0, 100% 20%, 0 100%);
}

/* Costura horizontal: relleno + línea de acento en la MISMA pieza SVG */
.trans--costura svg{ height:clamp(60px, 8vw, 130px); }

/* Formas listas para copiar (d=) ------------------------------------
   OLA SUAVE      M0,0 H1440 V60 C1080,150 720,20 360,90 C220,118 100,110 0,80 Z
   OLA DOBLE      M0,0 H1440 V90 C1200,40 960,140 720,90 C480,40 240,140 0,90 Z
   CURVA AMPLIA   M0,0 H1440 V20 Q720,170 0,20 Z
   ORGÁNICA       M0,0 H1440 V70 C1250,120 1130,30 900,70 C650,115 420,20 180,85 C110,104 50,100 0,90 Z
   COSTURA (forma + línea sobre la misma curva):
     forma: M0,0 H1440 V40 C1100,140 500,-10 0,100 Z
     linea: M1440,40 C1100,140 500,-10 0,100
   -------------------------------------------------------------------- */

@media (max-width:700px){
  .trans svg{ height:clamp(44px, 12vw, 70px); }
}