/**
 * Layout de página Angel Touch 28 Tienda.
 * Toda definición de diseño vive en theme.css (tokens + componentes + utilidades).
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-body);
    line-height: var(--line-body);
    color: var(--ui-text);
    background: var(--ui-bg-page);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.at-shell {
    max-width: var(--layout-max);
    margin-inline: auto;
    padding-top: max(var(--space-6), env(safe-area-inset-top, 0px));
    padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px))
        max(var(--space-4), env(safe-area-inset-right, 0px));
    padding-bottom: max(var(--space-12), env(safe-area-inset-bottom, 0px));
}

/* Vista dentro del shell comercial (#contenido-principal): sin tope estrecho (--layout-max)
   ni padding horizontal duplicado (ya lo aporta .at-layout__body → mismo canal que el pie). */
.at-layout__main > .at-shell {
    max-width: none;
    width: 100%;
    padding-inline: 0;
}

.at-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(180deg, var(--ui-surface-highlight-veil-97) 0%, var(--ui-bg-surface) 100%);
    border-radius: var(--at-radius);
    box-shadow: var(--at-shadow);
    margin-bottom: var(--space-7);
    border: 1px solid var(--ui-border-strong);
    transition: box-shadow var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default);
}

.at-header:hover {
    box-shadow: var(--ui-shadow-lg);
    border-color: rgb(var(--rgb-brand) / 0.22);
}

.at-header--brand {
    flex-wrap: wrap;
    align-items: flex-start;
}

.at-header__brandmark {
    flex: 1 1 16rem;
    min-width: 0;
    display: block;
    line-height: 0;
}

.at-header__brandmark img {
    display: block;
    width: 100%;
    max-width: 22rem;
    height: auto;
    border-radius: var(--ui-radius-lg);
}

.at-header__logo {
    flex-shrink: 0;
}

.at-header__logo img {
    display: block;
    width: 4.5rem;
    height: auto;
    border-radius: var(--ui-radius-sm);
}

.at-header__text h1 {
    margin: 0 0 var(--space-1);
    font-size: var(--font-h1);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-tight);
    line-height: var(--line-tight);
}

.at-header__text p {
    margin: 0;
    font-size: var(--font-small);
    color: var(--ui-text-muted);
}

.at-card {
    background: var(--ui-bg-raised);
    border-radius: var(--ui-radius-md);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--ui-shadow-sm);
    border: 1px solid var(--ui-border);
    margin-bottom: var(--space-4);
    transition:
        box-shadow var(--duration-base) var(--ease-default),
        border-color var(--duration-base) var(--ease-default);
}

.at-card:hover {
    box-shadow: var(--ui-shadow-md);
    border-color: rgb(var(--rgb-brand) / 0.12);
}

/* Tarjetas de apoyo (sidebar, “por qué comprar”): mismo ritmo, menos ruido visual */
.at-card--quiet {
    background: var(--ui-bg-surface);
    box-shadow: none;
    border-color: var(--ui-border);
    padding: var(--space-3) var(--space-4);
}

.at-card--quiet:hover {
    box-shadow: var(--ui-shadow-sm);
}

.at-card h2 {
    margin: 0 0 var(--space-3);
    font-size: var(--font-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--ui-text-secondary);
    line-height: var(--line-tight);
}

.ok {
    display: inline-block;
    margin: 0;
    padding: var(--space-2) var(--space-4);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-small);
    color: var(--at-success);
    background: linear-gradient(
        90deg,
        rgb(var(--rgb-success) / 0.12) 0%,
        rgb(var(--rgb-success-bright) / 0.08) 100%
    );
    border: 1px solid rgb(var(--rgb-success) / 0.22);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-sm);
}

.err {
    display: inline-block;
    margin: 0;
    padding: var(--space-2) var(--space-4);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-small);
    color: var(--at-danger);
    background: linear-gradient(90deg, rgb(var(--rgb-danger) / 0.1) 0%, rgb(var(--rgb-rose) / 0.06) 100%);
    border: 1px solid rgb(var(--rgb-danger) / 0.2);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-sm);
}

code {
    background: var(--ui-bg-muted);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--ui-radius-sm);
    font-size: var(--font-small);
    border: 1px solid var(--ui-border);
    box-shadow: inset 0 1px 0 var(--ui-surface-highlight-veil-60);
}

/* Excluye búsqueda del header y boletín del pie (este lleva .at-card + theme.css). */
form:not(.at-header-rail__search):not(.at-footer-newsletter) {
    margin-top: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--at-radius);
    max-width: 28rem;
    background: linear-gradient(
        165deg,
        rgb(var(--rgb-mint) / 0.14) 0%,
        var(--ui-surface-highlight-veil-55) 42%,
        var(--ui-bg-surface) 100%
    );
    box-shadow: var(--ui-shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default);
}

form:not(.at-header-rail__search):not(.at-footer-newsletter):focus-within {
    border-color: rgb(var(--rgb-brand) / 0.28);
    box-shadow: var(--ui-shadow-md);
}

form:not(.at-header-rail__search):not(.at-footer-newsletter) button[type="submit"],
form:not(.at-header-rail__search):not(.at-footer-newsletter) button:not([type]) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ui-touch-target-min);
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-small);
    color: var(--ui-btn-primary-fg);
    border: none;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-btn-primary-bg);
    box-shadow: var(--ui-btn-primary-shadow);
    transition: var(--transition-button);
}

form:not(.at-header-rail__search):not(.at-footer-newsletter) button[type="submit"]:disabled,
form:not(.at-header-rail__search):not(.at-footer-newsletter) button:not([type]):disabled {
    opacity: var(--ui-opacity-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

form:not(.at-header-rail__search):not(.at-footer-newsletter) button[type="submit"]:hover,
form:not(.at-header-rail__search):not(.at-footer-newsletter) button:not([type]):hover {
    filter: var(--ui-btn-primary-hover);
}

form:not(.at-header-rail__search):not(.at-footer-newsletter) button[type="submit"]:active,
form:not(.at-header-rail__search):not(.at-footer-newsletter) button:not([type]):active {
    transform: var(--ui-btn-primary-active);
}

form:not(.at-header-rail__search):not(.at-footer-newsletter) button[type="submit"]:focus-visible,
form:not(.at-header-rail__search):not(.at-footer-newsletter) button:not([type]):focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring), var(--ui-btn-primary-shadow);
}

form:not(.at-header-rail__search):not(.at-footer-newsletter) button[type="submit"]:hover:not(:disabled),
form:not(.at-header-rail__search):not(.at-footer-newsletter) button:not([type]):hover:not(:disabled) {
    box-shadow: var(--ui-btn-primary-shadow-hover);
}

.at-main-heading {
    margin-bottom: var(--space-6);
}

.at-main-heading h1 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-h1);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-tight);
    line-height: var(--line-tight);
    color: var(--ui-text);
}

.at-main-heading h2 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-h2);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-tight);
    line-height: var(--line-tight);
    color: var(--ui-text);
}

.at-main-heading .at-text-muted {
    margin: 0;
    font-size: var(--font-small);
}

.at-code-pre {
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 2.5rem;
    margin: 0;
}

.at-error-page {
    padding-top: var(--space-10);
}