/* ==========================================================================
   shapes.css - Encapsulación de Formas Geométricas Planas
   ========================================================================== */

/* 1. Rectángulos con bordes redondeados (Píldoras / Capsule Shapes) */
.shape-pill {
  display: block;
  border-radius: 9999px;
}

/* Variación con arco superior redondeado (tipo ventana / cúpula) */
.shape-arch {
  display: block;
  border-top-left-radius: 120px;
  border-top-right-radius: 120px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* 2. Círculos y Semicírculos */
.shape-circle {
  display: block;
  border-radius: 50%;
}

.shape-semicircle-right {
  display: block;
  border-radius: 0 100px 100px 0;
}

/* 3. Paralelogramos y Cuadrados */
.shape-parallelogram {
  display: block;
  transform: skewX(-15deg);
}

.shape-square {
  display: block;
  aspect-ratio: 1 / 1;
}

/* 4. Triángulos (utilizando clip-path para mayor consistencia responsive) */
.shape-triangle {
  display: block;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.shape-triangle-right {
  display: block;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}