/* ==========================================================================
   DiplomaKit certificate artwork (A4 landscape, 1123 x 794 css px)

   Shared by diploma.html (the demo) and ../index.html (the platform's
   Constancia de acreditación), so both always render the same design.
   Fonts: Great Vibes, Herr Von Muellerhoff, Montserrat, Playfair Display - the
   host page must load them (see the Google Fonts link in either page).
   ========================================================================== */

/* Resets wrapped in :where() so they carry no specificity: the design's own rules
   (.cert-title margin, .cert-desc margin-bottom:auto, ...) must always win. */
:where(.certificate, .certificate *, .certificate *::before, .certificate *::after) { box-sizing: border-box; }
:where(.certificate) :where(h1, h2, p) { margin: 0; padding: 0; }

.certificate {
    /* Design tokens live on the certificate itself so any host page can embed it. */
    --navy: #0f295b;
    --gold: #fcd371;
    --silver: #e2e4e9;
    --text-dark: #222222;
    --text-gray: #777777;
    /* A4 landscape at 96 dpi: 297mm x 210mm. The artwork matches the paper
       aspect ratio exactly, so the PDF has no white bands on any edge. */
    --paper-w: 1123px;
    --paper-h: 794px;

    width: var(--paper-w);
    height: var(--paper-h);
    /* Pin the inherited text settings: a host page's body font, line-height or
       letter-spacing must not leak into the artwork. */
    font-family: 'Montserrat', sans-serif;
    color: #333;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    font-variant-numeric: normal;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* preserveAspectRatio="none" lets the sweeps stretch to whatever paper size is
   selected, so the decoration always reaches every edge. */
.cert-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.bracket-top-left,
.bracket-bottom-left { position: absolute; z-index: 3; }

.bracket-top-left {
    top: 50px; left: 50px; width: 690px; height: 190px;
    border-top: 2px solid var(--text-dark);
    border-left: 2px solid var(--text-dark);
}

.bracket-bottom-left {
    bottom: 50px; left: 50px; width: 250px; height: 170px;
    border-bottom: 2px solid var(--text-dark);
    border-left: 2px solid var(--text-dark);
}

.cert-content {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5;
    padding: 100px 90px;
    display: flex;
}

.cert-text-container {
    width: 100%;
    max-width: 660px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cert-title {
    font-size: 52px;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: 12px;
    margin-bottom: 5px;
}

.cert-subtitle {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-dark);
    letter-spacing: 8px;
    margin-bottom: 54px;
    margin-left: 5px;
}

.cert-name {
    font-family: 'Great Vibes', cursive;
    font-size: 85px;
    color: var(--text-dark);
    margin-bottom: 18px;
    line-height: 1.1;
    overflow-wrap: break-word;
}

.cert-course-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-gray);
    margin-bottom: 6px;
}

.cert-course-name {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 23px;
    color: var(--navy);
    margin-bottom: 22px;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.cert-desc {
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    color: var(--text-gray);
    line-height: 1.8;
    max-width: 480px;
    text-align: justify;
    margin-bottom: auto;
}

.cert-footer { display: flex; gap: 120px; padding-bottom: 10px; padding-left: 10px; }

.footer-block { display: flex; flex-direction: column; gap: 15px; }

.footer-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 4px;
}

.footer-val {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    width: 150px;
}

.footer-val.signature {
    font-family: 'Herr Von Muellerhoff', cursive;
    font-size: 42px;
    border-bottom: none;
    padding-bottom: 0;
    line-height: 0.5;
    position: relative;
    top: 10px;
}

.footer-val.signature::after {
    content: '';
    position: absolute;
    bottom: -5px; left: 0;
    width: 100%; height: 1px;
    background: #ccc;
}

/* Cursive scripts can render illegibly at small sizes, especially for names
   with accented characters, so the instructor's name is repeated in plain type. */
.footer-val-printed {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-dark);
    margin-top: 4px;
    width: 150px;
}

/* --- Seal --- */
.seal-container {
    position: absolute;
    bottom: 95px;
    right: 128px;
    width: 180px;
    height: 180px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The badge is SVG rather than CSS circles on purpose: html2canvas cannot draw
   box-shadow at all, so a CSS seal loses its drop shadow in the export. Drawn as
   SVG, DiplomaKit rasterizes it and gradient, dashes and shadow all survive. */
.seal-badge {
    position: absolute;
    width: 180px;
    height: 180px;
}

.circular-text {
    position: absolute;
    width: 180px;
    height: 180px;
    animation: rotateText 40s linear infinite;
}

/* Counter-rotating dashed ring: opposite direction and a different period, so the
   seal never settles into a single repeating pose. */
.seal-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: rotateRing 26s linear infinite;
}

/* A highlight that sweeps across the gold, then rests before the next pass. */
.seal-shine {
    animation: sealShine 6s ease-in-out infinite;
}

@keyframes rotateText {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes rotateRing {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@keyframes sealShine {
    0%   { transform: translateX(0); }
    45%  { transform: translateX(280px); }
    100% { transform: translateX(280px); }
}

/* Motion is a class rather than a bare media query so the checkbox can override
   it either way. The initial value follows the OS setting. */
.no-motion .circular-text,
.no-motion .seal-ring,
.no-motion .seal-shine { animation: none; }