/* ============================================================
   DASSA — Primitivas editoriales · Manual de Marca 4.0
   ----------------------------------------------------------------
   Gestos visuales canónicos de la marca 4.0:
     1. Marco rojo   — fondo rojo + borde punteado blanco interior.
                       LA firma visual de DASSA (Manual 4.0 · slide 06-09).
     2. Píldora      — bloque de mensaje rojo foto+texto.
     3. Icon-tile    — cuadrito rojo/aqua con glifo blanco e anillo interior.
     4. Titular bicolor — palabra clave en aqua dentro de un titular.
     5. Isotipo      — marca "scan corners" como cierre.
     6. Divider morse — guiones rojo+aqua entre secciones.
     (Se conservan .ds-notch / .ds-dashed por compatibilidad.)

   Requiere: colors_and_type.css cargado primero.
   ============================================================ */

:root {
  --ds-rad-marco-out: var(--radius-marco-out); /* 56px esquina exterior */
  --ds-rad-marco-in:  var(--radius-marco);     /* 40px borde punteado   */
  --ds-rad-tile:      18px;
  --ds-rad-pill:      var(--radius-pill);
}

/* ============================================================
   1. MARCO ROJO — la firma de DASSA
   --------------------------------------------------------------
   Fondo rojo 100% + borde punteado blanco a 36px del borde.
   Toda pieza foto+texto lleva este marco (Manual 4.0).
     <div class="ds-marco">
       <div class="ds-marco__inner"> … contenido … </div>
     </div>
   Modificadores: --aqua (marco aqua), --post (radios de feed 4:5).
   ============================================================ */
.ds-marco {
  position: relative;
  background: var(--dassa-red);
  border-radius: var(--ds-rad-marco-out);
  padding: 56px;
  color: #fff;
  isolation: isolate;
}
.ds-marco::before {
  content: "";
  position: absolute;
  inset: 36px;
  border: 2px dashed #fff;
  border-radius: var(--ds-rad-marco-in);
  pointer-events: none;
  z-index: 0;
}
.ds-marco > * { position: relative; z-index: 1; }
.ds-marco--aqua { background: var(--dassa-aqua); }
.ds-marco--post { border-radius: var(--radius-marco); padding: 40px; }
.ds-marco--post::before { inset: 26px; border-radius: 28px; }
.ds-marco--compact { padding: 32px; border-radius: var(--radius-marco); }
.ds-marco--compact::before { inset: 18px; border-radius: 26px; }

/* URL de cierre, centrada, con líneas a los lados (Manual 4.0). */
.ds-marco__url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 600;
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
  color: #fff;
}
.ds-marco__url::before,
.ds-marco__url::after {
  content: "";
  width: 64px;
  height: 1px;
  background: rgba(255,255,255,0.5);
}

/* ============================================================
   2. PÍLDORA — bloque de mensaje foto+texto
   --------------------------------------------------------------
   Rectángulo rojo, esquinas 24px, texto blanco Mulish 800.
   ============================================================ */
.ds-pildora {
  position: relative;
  background: var(--dassa-red);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  box-shadow: var(--shadow-pill);
}
.ds-pildora b, .ds-pildora strong { font-weight: var(--fw-black); }
.ds-pildora__icon {
  position: absolute;
  top: -22px;
  left: -22px;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--dassa-aqua);
  display: grid;
  place-items: center;
  color: #fff;
}
.ds-pildora__icon svg,
.ds-pildora__icon img { width: 56%; height: 56%; }

/* ============================================================
   3. ICON-TILE — cuadrito de marca con glifo blanco
   --------------------------------------------------------------
   Manual 4.0: tile rojo o aqua, radio 18-20px, anillo blanco
   interior 3px, glifo ocupa ~58% del tile.
   ============================================================ */
.ds-icon-tile {
  width: 56px;
  height: 56px;
  background: var(--dassa-aqua);
  border-radius: var(--ds-rad-tile);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.92);
}
.ds-icon-tile--red { background: var(--dassa-red); }
.ds-icon-tile--lg  { width: 72px; height: 72px; border-radius: 22px; }
.ds-icon-tile--sm  { width: 44px; height: 44px; border-radius: 14px; }
.ds-icon-tile svg  { width: 56%; height: 56%; stroke-width: 2; }
.ds-icon-tile img  { width: 58%; height: 58%; object-fit: contain; }
/* Los íconos de marca son PNG rojos; en tile se pintan blancos. */
.ds-icon-tile img.ds-icon--invert { filter: brightness(0) invert(1); }

.ds-icon-row { display: inline-flex; gap: 12px; }

/* ============================================================
   4. TITULAR BICOLOR — énfasis por color, no por peso
   --------------------------------------------------------------
   Una sola palabra clave en aqua dentro del titular (Manual 4.0).
   ============================================================ */
.ds-em-aqua    { color: var(--dassa-aqua);    font-style: normal; font-weight: inherit; }
.ds-em-red     { color: var(--dassa-red);     font-style: normal; font-weight: inherit; }
.ds-em-white   { color: #fff;                 font-style: normal; font-weight: inherit; }
.ds-em-celeste { color: var(--dassa-aqua);    font-style: normal; font-weight: inherit; } /* alias compat */

.ds-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.ds-display--red { color: var(--dassa-red); }

/* ============================================================
   5. ISOTIPO — marca "scan corners" de cierre
   ============================================================ */
.ds-isotipo {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-isotipo img,
.ds-isotipo svg { width: 100%; height: 100%; object-fit: contain; }
.ds-isotipo--lg { width: 72px; height: 72px; }
.ds-isotipo--inline { position: static; transform: none; display: inline-flex; }

/* ============================================================
   6. DIVIDER MORSE — guiones rojo + aqua entre secciones
   ============================================================ */
.ds-divider-morse {
  border: 0;
  height: 4px;
  background-image:
    linear-gradient(to right,
      var(--dassa-red) 0 12px, transparent 12px 20px,
      var(--dassa-red) 20px 32px, transparent 32px 40px,
      var(--dassa-aqua) 40px 52px, transparent 52px 60px,
      var(--dassa-red) 60px 72px, transparent 72px 80px);
  background-size: 80px 4px;
  background-repeat: repeat-x;
  background-position: left center;
  margin: 32px 0;
}

/* ============================================================
   PÍLDORA CTA — botón totalmente redondeado
   ============================================================ */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--dassa-aqua);
  color: #fff;
  font: var(--fw-bold) 1rem/1 var(--font-sans);
  padding: 0.7rem 1.6rem;
  border: none;
  border-radius: var(--ds-rad-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard);
}
.ds-pill:hover     { background: var(--dassa-aqua-deep); color: #fff; }
.ds-pill--red      { background: var(--dassa-red); }
.ds-pill--red:hover{ background: var(--dassa-red-deep); }
.ds-pill--outline  { background: transparent; color: #fff; border: 1.5px solid #fff; }
.ds-pill--outline:hover { background: #fff; color: var(--dassa-red); }
.ds-pill--lg       { font-size: 1.25rem; padding: 0.9rem 2rem; }

/* ============================================================
   COMPAT — .ds-notch / .ds-dashed (sistema editorial v3)
   Se conservan para piezas existentes; en marca 4.0 preferir
   .ds-marco. Heredan la paleta 4.0 vía tokens.
   ============================================================ */
.ds-notch {
  position: relative;
  display: inline-block;
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  --notch-bg: var(--dassa-red);
  --notch-size: 2rem;
}
.ds-notch::before {
  content: "";
  position: absolute;
  width: var(--notch-size);
  height: var(--notch-size);
  background: var(--notch-bg);
}
.ds-notch--tl::before { top: 0; left: 0; border-bottom-right-radius: 1.25rem; }
.ds-notch--tr::before { top: 0; right: 0; border-bottom-left-radius: 1.25rem; }
.ds-notch--bl::before { bottom: 0; left: 0; border-top-right-radius: 1.25rem; }
.ds-notch--br::before { bottom: 0; right: 0; border-top-left-radius: 1.25rem; }
.ds-notch--filled-red    { background: var(--dassa-red);  color: #fff; }
.ds-notch--filled-white  { background: #fff;              color: var(--dassa-red); }
.ds-notch--filled-bordo  { background: var(--dassa-red-deep); color: #fff; }
.ds-notch--filled-celeste{ background: var(--dassa-aqua); color: #fff; }

.ds-dashed {
  border: 2px dashed #fff;
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  background: transparent;
  color: #fff;
}
.ds-dashed--red     { border-color: var(--dassa-red);  color: var(--dassa-red);  background: #fff; }
.ds-dashed--celeste { border-color: var(--dassa-aqua); color: var(--dassa-aqua); background: #fff; }

/* ============================================================
   HELPERS DE COMPOSICIÓN
   ============================================================ */
.ds-stack-tight { display: flex; flex-direction: column; gap: 0.75rem; }
.ds-stack       { display: flex; flex-direction: column; gap: 1.5rem; }
.ds-stack-loose { display: flex; flex-direction: column; gap: 2.5rem; }
.ds-row-tight   { display: flex; gap: 0.75rem; align-items: center; }
.ds-row         { display: flex; gap: 1.5rem; align-items: center; }
.ds-center      { text-align: center; }