/* ============================================================
DASSA — Editorial system primitives
----------------------------------------------------------------
Lifted out of `ui_kits/social/social.css` so any DASSA artifact
(deck, brochure, ad, microsite, dashboard banner, internal email)
can reuse the same six visual gestures that define the brand on
social media:
1. Notch frame — rounded card with one corner notched away.
2. Dashed frame — open scaffolding container (white-on-red or
red-on-white).
3. Pill CTA — fully rounded button, teal default.
4. Icon tile — teal rounded-square holding a white line icon.
5. Two-color headline — white body + red emphasis on the same
line (or vice versa) to drive a single key word.
6. Isotipo signature — white DASSA bracket-mark centred at the
bottom margin, the closing punctuation of any
red-ground composition.
Sized in REM so the same tokens scale from a 1080-px social tile
to a 1920-px slide to a 480-px web embed. Override --dassa-rad-*
inside a wrapper if you need a tighter feel.
Requires: colors_and_type.css (loaded first).
============================================================ */
:root {
/* Editorial radii — generous, never timid. */
--ds-rad-notch: 2.5rem; /* outer radius of notch / dashed frames */
--ds-rad-notch-cut: 1.25rem; /* concave radius of the notch carve */
--ds-rad-tile: 0.875rem; /* icon-tile radius */
--ds-rad-pill: 999px;
/* Editorial paddings */
--ds-pad-notch: 1.75rem 2rem;
--ds-pad-dashed: 1.75rem 2rem;
--ds-pad-pill: 0.7rem 1.6rem;
/* Editorial type */
--ds-h-display: 700 clamp(2.25rem, 4.5vw, 4rem)/1.05 var(--font-display);
--ds-h-card: 700 clamp(1.4rem, 2.2vw, 2.25rem)/1.1 var(--font-display);
--ds-h-body: 400 clamp(1rem, 1.2vw, 1.25rem)/1.45 var(--font-sans);
--ds-h-eyebrow: 700 0.875rem/1 var(--font-sans);
}
/* ============================================================
1. NOTCH FRAME — the signature container
--------------------------------------------------------------
Rounded rectangle with a square notch carved from one corner.
Built with one element + ::before so the notch ALWAYS uses the
parent ground color — set --notch-bg on the wrapper if it sits
over something other than DASSA red.
Variants (combine):
.ds-notch--filled-red red field, white ink
.ds-notch--filled-white white field, red ink
.ds-notch--filled-bordo bordo field, white ink (heavier weight)
.ds-notch--tl|--tr|--bl|--br which corner is notched
============================================================ */
.ds-notch {
position: relative;
display: inline-block;
border-radius: var(--ds-rad-notch);
padding: var(--ds-pad-notch);
--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: var(--ds-rad-notch-cut); }
.ds-notch--tr::before { top: 0; right: 0; border-bottom-left-radius: var(--ds-rad-notch-cut); }
.ds-notch--bl::before { bottom: 0; left: 0; border-top-right-radius: var(--ds-rad-notch-cut); }
.ds-notch--br::before { bottom: 0; right: 0; border-top-left-radius: var(--ds-rad-notch-cut); }
.ds-notch--filled-red { background: var(--dassa-red); color: white; }
.ds-notch--filled-white { background: white; color: var(--dassa-red); }
.ds-notch--filled-bordo { background: var(--dassa-bordo); color: white; }
.ds-notch--filled-celeste{background: var(--dassa-celeste);color: white; }
/* When the notch frame sits on a non-red ground (white page,
bordo banner, photograph), set --notch-bg explicitly so the
carve fills with the right color:
…
*/
/* ============================================================
2. DASHED FRAME — open scaffolding container
--------------------------------------------------------------
Used as a secondary container — usually as a "framing line"
that hosts a teaser, a question, or a numbered milestone.
White dashes on red ground; flip with --red.
============================================================ */
.ds-dashed {
border: 2px dashed white;
border-radius: var(--ds-rad-notch);
padding: var(--ds-pad-dashed);
background: transparent;
color: white;
}
.ds-dashed--red {
border-color: var(--dassa-red);
color: var(--dassa-red);
background: white;
}
.ds-dashed--celeste {
border-color: var(--dassa-celeste);
color: var(--dassa-celeste);
background: white;
}
/* ============================================================
3. PILL CTA — fully rounded button
--------------------------------------------------------------
Teal default (the brand's "secondary action" color); reds and
outlines for context. Sized for hand-set type — for very small
UI use the .dassa-pill class in `ui_kits/website/site.css`
which is calibrated to web product proportions.
============================================================ */
.ds-pill {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: var(--dassa-celeste);
color: white;
font: 700 1rem/1 var(--font-sans);
padding: var(--ds-pad-pill);
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-celeste-deep); color: white; }
.ds-pill--red { background: var(--dassa-red); }
.ds-pill--red:hover{ background: var(--dassa-red-deep); }
.ds-pill--bordo { background: var(--dassa-bordo); color: white; }
.ds-pill--outline { background: transparent; color: white; border: 1.5px solid white; }
.ds-pill--outline:hover { background: white; color: var(--dassa-red); }
.ds-pill--lg { font-size: 1.25rem; padding: 0.9rem 2rem; }
/* ============================================================
4. ICON TILE — teal rounded-square w/ white icon inside
--------------------------------------------------------------
Stack three of these in a row to label a service or feature
trio. Place a single Lucide / brand SVG inside; the tile sets
color: white so `stroke="currentColor"` paints the glyph.
============================================================ */
.ds-icon-tile {
width: 3.25rem;
height: 3.25rem;
background: var(--dassa-celeste);
border-radius: var(--ds-rad-tile);
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.ds-icon-tile--lg { width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; }
.ds-icon-tile--xl { width: 6rem; height: 6rem; border-radius: 1.4rem; }
.ds-icon-tile--red { background: var(--dassa-red); }
.ds-icon-tile svg { width: 56%; height: 56%; stroke-width: 2; }
.ds-icon-row {
display: inline-flex;
gap: 0.6rem;
}
/* ============================================================
5. TWO-COLOR HEADLINE — emphasis with color, not weight
--------------------------------------------------------------
Wrap a key word in (or --celeste) inside
a white headline to reproduce the editorial cadence of the
social posts ("Confianza que mueve tu operación", "Logística
pensada para vos"). Keep the emphasis to ONE word group per
headline — two color shifts in the same line read as noise.
============================================================ */
.ds-em-red { color: var(--dassa-red); font-style: normal; font-weight: inherit; }
.ds-em-celeste { color: var(--dassa-celeste); font-style: normal; font-weight: inherit; }
.ds-em-white { color: white; font-style: normal; font-weight: inherit; }
/* Display headline class — used INSIDE notch / dashed cards or
over a red field. Don't use on a white page; that's what
`.t-h1` / `.t-display` from colors_and_type.css are for. */
.ds-display {
font: var(--ds-h-display);
letter-spacing: -0.01em;
margin: 0;
color: white;
text-wrap: balance;
}
.ds-display--red { color: var(--dassa-red); }
/* ============================================================
6. ISOTIPO SIGNATURE — closing mark on red compositions
--------------------------------------------------------------
The bracket-only DASSA mark, white, centered at the bottom
margin of any red-ground composition. Acts as the period at
the end of the sentence — every story / feed post has one.
Drop in an 
or the SVG
isotipo and add this class.
============================================================ */
.ds-isotipo {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
width: 3rem;
height: 3rem;
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: 4.5rem; height: 4.5rem; }
.ds-isotipo--inline {
position: static;
transform: none;
display: inline-flex;
}
/* ============================================================
COMPOSITION HELPERS
============================================================ */
.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; }
/* Editorial divider — a horizontal "Morse" of red and teal dashes,
used between sections in long-form material as a quieter
alternative to a solid rule. Place as
*/
.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-celeste) 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: 2rem 0;
}