/* ==========================================================================
   SALSAS CHILANGAS · LAYOUT
   --------------------------------------------------------------------------
   Contenedores, secciones, grids y helpers de composición.
   Cómo usar en Elementor:
     · Contenedor principal de sección → CSS Class "sc-section" (+ variante de fondo)
     · Contenedor interno centrado      → CSS Class "sc-container"
     · Contenedor de tarjetas           → CSS Class "sc-grid sc-grid--3"
   Si Elementor ya gestiona el ancho con su "Content Width", puedes usar solo
   los modificadores de fondo (sc-section--cream, etc.) sobre el contenedor.
   ========================================================================== */

/* ---- Contenedor ---------------------------------------------------------- */
.sc-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.sc-container--narrow { max-width: var(--container-narrow); }

/* ---- Secciones ----------------------------------------------------------- */
.sc-section { padding-block: var(--section-py); }
.sc-section--sm { padding-block: var(--section-py-sm); }

/* Variantes de fondo */
.sc-section--cream     { background: var(--cream-50); }
.sc-section--cream-alt { background: var(--cream-100); }
.sc-section--white     { background: var(--white); }
.sc-section--muted     { background: var(--gray-50); }
.sc-section--dark      { background: var(--bg-inverse); color: var(--text-inverse); }
.sc-section--green     { background: var(--green-500); color: #fff; }
.sc-section--red       { background: var(--red-500); color: #fff; }

/* En secciones oscuras, los textos secundarios se aclaran */
.sc-section--dark .sc-lead,
.sc-section--dark .sc-body { color: var(--text-inverse-muted); }
.sc-section--dark .sc-h1,
.sc-section--dark .sc-h2,
.sc-section--dark .sc-h3,
.sc-section--dark .sc-h4,
.sc-section--dark .sc-display { color: #fff; }

/* ---- Grid fluido --------------------------------------------------------- */
.sc-grid { display: grid; gap: var(--grid-gap); }
.sc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sc-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sc-grid--lg-gap { gap: var(--grid-gap-lg); }

/* ---- Split (texto + media) ---------------------------------------------- */
.sc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
/* Invierte el orden visual sin tocar el HTML */
.sc-split--media-left { direction: rtl; }
.sc-split--media-left > * { direction: ltr; }

/* ---- Stacks (ritmo vertical) -------------------------------------------- */
.sc-stack > * + * { margin-top: var(--space-4); }
.sc-stack-lg > * + * { margin-top: var(--space-6); }

/* ---- Blob orgánico decorativo tras media -------------------------------- */
.sc-blob-media { position: relative; }
.sc-blob-media__shape {
  position: absolute;
  inset: -8% -6% auto auto;
  width: 62%;
  aspect-ratio: 1;
  background: var(--green-100);
  border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
  z-index: 0;
}
.sc-blob-media__shape--red   { background: var(--red-100); }
.sc-blob-media__shape--amber { background: var(--amber-100); }
.sc-blob-media img,
.sc-blob-media .sc-blob-media__img { position: relative; z-index: 1; }

/* ==========================================================================
   RESPONSIVE — Breakpoints: 1024 (laptop) · 768 (tablet) · 560 (mobile)
   ========================================================================== */
@media (max-width:1024px){
  .sc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:768px){
  .sc-split { grid-template-columns: 1fr; gap: var(--space-10); }
  .sc-split--media-left { direction: ltr; }
  .sc-grid--3,
  .sc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:560px){
  .sc-grid--2,
  .sc-grid--3,
  .sc-grid--4 { grid-template-columns: 1fr; }
}