/*
 * layout.css - the master section containers every template is built from.
 *
 * One base block plus modifiers, rather than a class per colour. The old
 * .de-seccion-magenta / .de-seccion-gris pair welded four separate decisions
 * together - background, height, padding and the downward arrow - so none of
 * them could be reused without the others. They are separated here:
 *
 *   .de-seccion        the block itself
 *   .de-banda          the short heading strip variant
 *   .de-fondo-*        what colour it is
 *   .de-alto-completo  how tall it is
 *   .de-flecha         the arrow bleeding into whatever follows
 *
 * Every coloured background is glass: a tint over the fixed gradient that
 * base.css paints behind the whole document, so the backdrop stays visible
 * through the page rather than being covered by it.
 *
 * Each block keeps its own media-query overrides directly underneath it.
 * Those overrides match their base rule on specificity, so they only win by
 * coming later in the file - splitting them apart would silently change the
 * mobile layout.
 */

/* ==========================================================================
   BASE SECTION
   ========================================================================== */

.de-seccion {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 10%;
    text-align: center;
}

/* Short heading strip: the band a page opens with, or breaks itself up with. */
.de-banda {
    min-height: 150px;
    padding: 15px 10%;
}

/* ==========================================================================
   HEIGHT
   ========================================================================== */

/* Opt-in, not baked into the light section as it used to be. */
.de-alto-completo {
    min-height: 80vh;
}

/* Exactly the height the app shell leaves visible: the viewport, less the
   scroll container's top padding (which clears the header pill) and the
   bottom bar. Use it for a first screen that fills the frame without pushing
   what follows further below the fold than it has to be.

   The vh line is the fallback; dvh follows it so browsers that support it
   take the second and avoid the jump when the mobile address bar hides. On
   a page without the shell it just resolves to a little under the viewport,
   which is harmless. */
.de-alto-app {
    min-height: calc(100vh  - var(--de-scroll-pad-top) - var(--de-footer-h));
    min-height: calc(100dvh - var(--de-scroll-pad-top) - var(--de-footer-h));
}

/* ==========================================================================
   HERO

   A first screen carrying one heading and one button. The base h1 tops out
   at 32px, which reads as body copy when it is the only thing on screen, so
   the hero scales with the viewport instead. The measure is in ch rather
   than px so the line breaks follow the text, not the window.
   ========================================================================== */

.de-hero h1 {
    font-size: clamp(32px, 6vw, 64px);
    line-height: 1.2;
    max-width: 18ch;
}

/* ==========================================================================
   BACKGROUNDS

   Tint first, blur second. The blur is the expensive part on mid-range
   phones and it is not what carries the design: if it is unavailable or
   unwanted, the fallbacks below drop to the solid colour rather than leaving
   text floating on a busy gradient.
   ========================================================================== */

.de-fondo-primario {
    background-color: var(--de-glass-primary);
    color: var(--de-text-inverse);
}

.de-fondo-secundario {
    background-color: var(--de-glass-secondary);
    color: var(--de-text-inverse);
}

.de-fondo-claro {
    background-color: var(--de-glass-light);
    color: var(--de-text-color);
}

.de-fondo-oscuro {
    background-color: var(--de-glass-dark);
    color: var(--de-off-white);
}

/* The gradient again, this time as a section of its own. */
.de-fondo-degradado {
    background-image: var(--de-gradient-hero);
    color: var(--de-text-color);
}

/* Nothing at all: lets the backdrop through untinted. */
.de-fondo-marca {
    background-color: transparent;
    color: var(--de-text-color);
}

.de-fondo-primario,
.de-fondo-secundario,
.de-fondo-claro,
.de-fondo-oscuro {
    backdrop-filter: blur(var(--de-glass-blur-section));
    -webkit-backdrop-filter: blur(var(--de-glass-blur-section));
}

/* Typography sets its own colour at element specificity, so headings and
   copy have to be told to take the section's colour instead. Links are in
   this list for the same reason base.css gives them a colour at all: a
   violet link on a violet band is invisible. */
.de-fondo-primario h1,
.de-fondo-primario h2,
.de-fondo-primario h3,
.de-fondo-primario p,
.de-fondo-primario li,
.de-fondo-primario strong,
.de-fondo-primario a,
.de-fondo-secundario h1,
.de-fondo-secundario h2,
.de-fondo-secundario h3,
.de-fondo-secundario p,
.de-fondo-secundario li,
.de-fondo-secundario strong,
.de-fondo-secundario a,
.de-fondo-oscuro h1,
.de-fondo-oscuro h2,
.de-fondo-oscuro h3,
.de-fondo-oscuro p,
.de-fondo-oscuro li,
.de-fondo-oscuro strong,
.de-fondo-oscuro a {
    color: inherit;
    margin: 0;
}

/* Headings inside a band sit alone, but a full section now carries its own
   heading followed by content, so both need their rhythm back. These beat
   the margin:0 above on specificity, which is what the :not() buys. */
.de-seccion:not(.de-banda) h1,
.de-seccion:not(.de-banda) h2,
.de-seccion:not(.de-banda) h3 {
    margin: 0 0 30px 0;
}

.de-seccion:not(.de-banda) p,
.de-seccion:not(.de-banda) li {
    margin: 0 0 15px 0;
}

/* --- Fallbacks --- */
/* No backdrop-filter support, or transparency explicitly turned down. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .de-fondo-primario   { background-color: var(--de-solid-primary); }
    .de-fondo-secundario { background-color: var(--de-solid-secondary); }
    .de-fondo-claro      { background-color: var(--de-solid-light); }
    .de-fondo-oscuro     { background-color: var(--de-solid-dark); }
}

@media (prefers-reduced-transparency: reduce) {
    .de-fondo-primario   { background-color: var(--de-solid-primary); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .de-fondo-secundario { background-color: var(--de-solid-secondary); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .de-fondo-claro      { background-color: var(--de-solid-light); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .de-fondo-oscuro     { background-color: var(--de-solid-dark); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ==========================================================================
   ARROW

   Was an ::after welded to the magenta band, so no other section could carry
   it. Now a modifier, and it takes its colour from whatever it is attached
   to - background-color:inherit means one rule serves every --de-fondo-*.

   A border triangle cannot be tinted glass, so this is a clipped box
   instead. It is not blurred: at 60x30px the difference against the blurred
   band above it is not perceptible, and nesting backdrop filters is where
   they start behaving differently between browsers.

   There is deliberately no negative margin pulling the next section up. The
   old layout had one, because with opaque backgrounds the arrow needed the
   section below to rise and meet it. Glass changed that twice over: the
   arrow already overflows 29px past the band and paints over whatever
   follows, so the pull is unnecessary - and an overlap between two tinted
   surfaces stacks both tints, which showed up as a darker strip along the
   full width of the seam.

   The z-index goes on the BAND, not on the arrow, and that is the whole
   trick. backdrop-filter makes the band a stacking context, so a z-index on
   the ::after only ranks it against its own siblings inside the band - the
   next section, its own stacking context and later in the document, paints
   straight over the part of the arrow that overflows. Raising the band
   itself is what puts the overflow back on top. Before the glass this was
   invisible: a band with no filter created no stacking context, so the
   arrow's z-index applied against the whole page.
   ========================================================================== */

.de-flecha {
    z-index: 2;
}

.de-flecha::after {
    content: "";
    position: absolute;
    bottom: -29px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 30px;
    background-color: inherit;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ==========================================================================
   SPLIT SCREEN (registration landings, 50-50)
   ========================================================================== */

.de-seccion-dividida {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    width: 100%;
}

.de-mitad {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Padding by position rather than by colour: the outer edge of each half
   gets the wide gutter, whichever half it is. */
.de-seccion-dividida > .de-mitad:first-child {
    padding: 50px 40px 50px 10vw;
}

.de-seccion-dividida > .de-mitad:last-child {
    padding: 50px 10vw 50px 40px;
}

/* The two halves stack instead of sitting side by side. */
@media (max-width: 1024px) {
    .de-seccion-dividida {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .de-seccion-dividida > .de-mitad:first-child,
    .de-seccion-dividida > .de-mitad:last-child {
        padding: 60px 10%;
    }

    .de-seccion-dividida > .de-mitad:first-child {
        text-align: center;
    }
}