/* ─────────────────────────────────────────────
   Errante — tokens y estructura del diseño nuevo
   Fuente: design/portfolio-redesign-20260930-finalized.html
   Reglas de uso: DESIGN.md

   Todo va con prefijo (--e-*, .e-*). Nació para no chocar con el
   style.css viejo, que ya no existe; sacarlo es una decisión pendiente
   (ver design/plan-migracion-cuerpo.md, etapa 6).

   Tema: el sitio es verde (el modo oscuro del diseño). Los tokens
   claros quedan bajo [data-theme="light"] para el selector de tema
   de la etapa 7; hasta entonces nada los activa.
   ───────────────────────────────────────────── */

:root {
    /* Paleta verde: fondo verde bosque, texto crema, durazno como
       acento, marrón claro como secundario. */
    --e-bg: #12271D;
    --e-ink: #F3E6DA;
    --e-accent: #F9D2BA;
    --e-secondary: #D9B79F;

    --e-surface: #173023;
    --e-surface-2: #1C3829;
    --e-line: rgba(243, 230, 218, .16);
    --e-line-strong: rgba(243, 230, 218, .30);
    --e-ink-soft: rgba(243, 230, 218, .74);
    --e-ink-faint: rgba(243, 230, 218, .54);
    --e-accent-deep: #E8B79B;
    --e-focus: #F9D2BA;
    --e-on-accent: #5E3122;
    --e-on-secondary: #12271D;
    --e-open-day: rgba(243, 230, 218, .16);
    --e-error: #E8896B;
    --e-invalid-bg: rgba(232, 137, 107, .14);

    --e-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --e-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --e-s1: 4px;  --e-s2: 8px;  --e-s3: 12px; --e-s4: 16px; --e-s5: 24px;
    --e-s6: 32px; --e-s7: 48px; --e-s8: 64px; --e-s9: 96px;

    --e-radius: 4px;
    --e-radius-lg: 8px;
    --e-maxw: 1240px;

    --e-tap: 44px; /* área táctil mínima */

    color-scheme: dark;
}

/* Reset y base (antes en style.css, que se borró en la etapa 6). */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img { max-width: 100%; }

/* Modo claro del diseño (fondo crema). Sin uso hasta la etapa 7. */
:root[data-theme="light"] {
    --e-bg: #F7EAE0;
    --e-ink: #1D4533;
    --e-accent: #F9D2BA;
    --e-secondary: #5E3122;
    --e-surface: #FFFCF9;
    --e-surface-2: #FDF4EC;
    --e-line: rgba(94, 49, 34, .18);
    --e-line-strong: rgba(94, 49, 34, .34);
    --e-ink-soft: rgba(29, 69, 51, .72);
    --e-ink-faint: rgba(29, 69, 51, .80);
    --e-accent-deep: #E8B79B;
    --e-focus: #1D4533;
    --e-on-accent: #5E3122;
    --e-on-secondary: #F9D2BA;
    --e-open-day: #F9E2D1;
    --e-error: #B4472F;
    --e-invalid-bg: #FBEDE8;

    color-scheme: light;
}

/* ── Botón base y variante acento (las demás, en la base de componentes) ── */

.e-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--e-tap);
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--e-font-ui);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s, color .18s, border-color .18s, transform .12s;
}

.e-btn:active { transform: translateY(1px); }

.e-btn--accent {
    background: var(--e-accent);
    color: var(--e-on-accent);
    border-color: var(--e-accent);
}

.e-btn--accent:hover {
    background: var(--e-accent-deep);
    color: var(--e-on-accent);
}

/* ── Marca ── */

.e-brand {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    line-height: 1;
    color: var(--e-ink);
    text-decoration: none;
}

.e-brand:hover { color: var(--e-ink); }

.e-brand__mark {
    font-family: var(--e-font-display);
    font-size: 1.5rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.e-brand__sub {
    margin-top: 4px;
    font-family: var(--e-font-ui);
    font-size: .5rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--e-ink-faint);
}

/* ── Header y navegación ── */

.e-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--e-bg);
    color: var(--e-ink);
    border-bottom: 1px solid var(--e-line);
    font-family: var(--e-font-ui);
}

.e-nav__in {
    max-width: var(--e-maxw);
    margin: 0 auto;
    padding: 14px var(--e-s5);
    display: flex;
    align-items: center;
    gap: var(--e-s5);
}

.e-nav__links {
    display: flex;
    gap: var(--e-s5);
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.e-nav__links a {
    display: inline-block;
    padding: 10px 2px;
    font-size: .92rem;
    color: var(--e-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .18s, border-color .18s;
}

.e-nav__links a:hover {
    color: var(--e-ink);
    border-bottom-color: var(--e-line-strong);
}

.e-nav :focus-visible,
.e-footer :focus-visible {
    outline: 2px solid var(--e-focus);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Como en el diseño: en mobile quedan la marca y "Reservar turno";
   el resto de los links sigue en el footer. */
@media (max-width: 900px) {
    .e-nav__links { display: none; }
    .e-nav__in { padding: 12px var(--e-s4); justify-content: space-between; }
}

/* ── Footer ── */

.e-footer {
    margin-top: auto;
    padding: var(--e-s7) 0 var(--e-s6);
    background: var(--e-bg);
    color: var(--e-ink);
    border-top: 1px solid var(--e-line);
    font-family: var(--e-font-ui);
    line-height: 1.6;
}

.e-footer__wrap {
    max-width: var(--e-maxw);
    margin: 0 auto;
    padding: 0 var(--e-s5);
}

.e-footer__in {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-s5);
}

.e-footer__tagline {
    margin-top: var(--e-s4);
    max-width: 32ch;
    font-size: .9rem;
    color: var(--e-ink-soft);
}

.e-footer h4 {
    font-family: var(--e-font-ui);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--e-ink-faint);
}

.e-footer ul {
    list-style: none;
    margin: var(--e-s3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.e-footer ul a {
    font-size: .9rem;
    color: var(--e-ink-soft);
    text-decoration: none;
}

.e-footer ul a:hover {
    color: var(--e-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.e-footer__base {
    margin-top: var(--e-s7);
    padding-top: var(--e-s4);
    border-top: 1px solid var(--e-line);
    display: flex;
    justify-content: space-between;
    gap: var(--e-s4);
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--e-ink-faint);
}

@media (max-width: 760px) {
    .e-footer__in { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .e-footer__wrap { padding: 0 var(--e-s4); }
}

/* ─────────────────────────────────────────────
   Etapa 0: base de componentes. Todas las páginas llevan body.e-page
   (lo pone base.html por defecto).
   ───────────────────────────────────────────── */

/* ── Superficies del navegador (todas las páginas) ── */

::selection {
    background: var(--e-accent);
    color: var(--e-on-accent);
}

html {
    scrollbar-color: var(--e-line-strong) transparent;
}

/* ── Saltar al contenido ── */

.e-skip {
    position: absolute;
    left: var(--e-s4);
    top: -100px;
    z-index: 200;
    padding: var(--e-s3) var(--e-s4);
    border-radius: var(--e-radius);
    background: var(--e-accent);
    color: var(--e-on-accent);
    font-family: var(--e-font-ui);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
}

.e-skip:focus {
    top: var(--e-s3);
    outline: 2px solid var(--e-focus);
    outline-offset: 2px;
}

.e-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Página ── */

body.e-page {
    background: var(--e-bg);
    color: var(--e-ink);
    font-family: var(--e-font-ui);
    font-size: 1rem;
    line-height: 1.6;
    caret-color: var(--e-focus);
}

/* Con :where() los títulos de componente (.e-step__title, .e-cal__month…)
   pueden fijar su propio tamaño sin pelear especificidad. */
:where(.e-page) h1,
:where(.e-page) h2,
:where(.e-page) h3 {
    font-family: var(--e-font-display);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.01em;
    color: var(--e-ink);
}

:where(.e-page) h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
:where(.e-page) h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
:where(.e-page) h3 { font-size: 1.15rem; }

/* Links de texto. Con :where() la regla no suma especificidad: los botones,
   la marca y los links del header y el footer conservan su propio estilo. */
:where(.e-page) a {
    color: var(--e-ink);
    text-decoration: underline;
    text-decoration-color: var(--e-line-strong);
    text-underline-offset: 3px;
}

:where(.e-page) a:where(:hover) { text-decoration-color: var(--e-ink); }
:where(.e-page) a:where(:visited) { color: var(--e-secondary); }

.e-page :focus-visible {
    outline: 2px solid var(--e-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

.e-wrap {
    max-width: var(--e-maxw);
    margin: 0 auto;
    padding: 0 var(--e-s5);
}

.e-section { padding: var(--e-s8) 0; }
.e-section--alt {
    background: var(--e-surface-2);
    border-block: 1px solid var(--e-line);
}

/* Encabezado de sección: eyebrow + título a la izquierda, lede a la derecha. */
.e-section__head {
    display: flex;
    align-items: baseline;
    gap: var(--e-s5);
    flex-wrap: wrap;
    margin-bottom: var(--e-s6);
}

.e-section__head p {
    max-width: 56ch;
    font-size: .98rem;
    color: var(--e-ink-soft);
}

.e-eyebrow {
    display: block;
    margin-bottom: var(--e-s2);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--e-ink-faint);
}

/* ── Botones (variantes del diseño) ── */

.e-btn { cursor: pointer; }

.e-btn--ink {
    background: var(--e-ink);
    color: var(--e-bg);
    border-color: var(--e-ink);
}

.e-btn--ink:hover {
    background: var(--e-secondary);
    border-color: var(--e-secondary);
    color: var(--e-bg);
}

.e-btn--ghost {
    background: transparent;
    color: var(--e-ink);
    border-color: var(--e-line-strong);
}

.e-btn--ghost:hover { border-color: var(--e-ink); }

.e-btn--danger {
    background: transparent;
    color: var(--e-error);
    border-color: var(--e-error);
}

.e-btn--danger:hover { background: var(--e-invalid-bg); }

.e-btn--block { width: 100%; }

/* Solo para el admin (D13): mantiene el área táctil, menos aire a los costados. */
.e-btn--small {
    padding: 0 14px;
    font-size: .82rem;
}

.e-btn:disabled,
.e-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* ── Campos ── */

.e-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.e-field label {
    margin: 0;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--e-ink-soft);
}

.e-field input,
.e-field select,
.e-field textarea {
    width: 100%;
    min-height: var(--e-tap);
    padding: 12px 14px;
    border: 1px solid var(--e-line-strong);
    border-radius: var(--e-radius);
    background: var(--e-surface);
    color: var(--e-ink);
    font: inherit;
    transition: border-color .15s;
}

/* Flecha del select, dibujada con la paleta (style.css trae una en gris). */
.e-field select {
    appearance: none;
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--e-ink-soft) 50%),
        linear-gradient(135deg, var(--e-ink-soft) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 15px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

.e-field textarea {
    min-height: 132px;
    resize: vertical;
    line-height: 1.55;
}

.e-field input::placeholder,
.e-field textarea::placeholder {
    color: var(--e-ink-faint);
}

.e-field input:focus,
.e-field select:focus,
.e-field textarea:focus {
    border-color: var(--e-ink);
    outline: none;
}

/* Error: lo marca el servidor con aria-invalid, o el navegador después
   de que la persona tocó el campo (:user-invalid). */
.e-field [aria-invalid="true"],
.e-field input:user-invalid,
.e-field select:user-invalid,
.e-field textarea:user-invalid {
    border-color: var(--e-error);
    background: var(--e-invalid-bg);
}

.e-field__hint {
    font-size: .82rem;
    color: var(--e-ink-soft);
}

.e-field__error {
    font-size: .82rem;
    color: var(--e-error);
}

.e-req {
    margin-left: 2px;
    color: var(--e-error);
}

/* Casilla de consentimiento, como .consent del diseño. */
.e-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: var(--e-s4);
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius);
    background: var(--e-surface);
}

.e-check input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    border: 1.5px solid var(--e-line-strong);
    border-radius: 3px;
    background: var(--e-surface);
    cursor: pointer;
}

.e-check input:checked {
    background: var(--e-secondary);
    border-color: var(--e-secondary);
}

.e-check input:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid var(--e-on-secondary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.e-check label {
    display: block;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: .88rem;
    color: var(--e-ink-soft);
    cursor: pointer;
}

.e-check.is-invalid {
    border-color: var(--e-error);
    background: var(--e-invalid-bg);
}

/* ── Avisos (flash) ── */

.e-flash-zone {
    width: 100%;
    max-width: var(--e-maxw);
    margin: var(--e-s4) auto 0;
    padding: 0 var(--e-s5);
    display: flex;
    flex-direction: column;
    gap: var(--e-s2);
}

.e-flash {
    padding: var(--e-s3) var(--e-s4);
    border: 1px solid var(--e-line-strong);
    border-radius: var(--e-radius);
    background: var(--e-surface-2);
    color: var(--e-ink);
    font-size: .92rem;
}

.e-flash--success {
    background: var(--e-accent);
    border-color: var(--e-accent-deep);
    color: var(--e-on-accent);
}

.e-flash--error {
    background: var(--e-invalid-bg);
    border-color: var(--e-error);
    color: var(--e-ink);
}

/* ── Tags de estado ── */

.e-tag {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 2px 12px;
    border-radius: 999px;
    border: 1px solid var(--e-line-strong);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--e-ink-soft);
}

.e-tag--accent,
.e-tag--esperando_pago,
.e-tag--pendiente,
.e-tag--aprobado {
    background: var(--e-accent);
    border-color: var(--e-accent);
    color: var(--e-on-accent);
}

.e-tag--confirmado,
.e-tag--agendado {
    background: var(--e-ink);
    border-color: var(--e-ink);
    color: var(--e-bg);
}

.e-tag--cancelado,
.e-tag--rechazado {
    color: var(--e-error);
    border-color: var(--e-error);
}

/* ── Tarjetas y pasos ── */

.e-card {
    background: var(--e-surface);
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius-lg);
}

.e-card__body { padding: var(--e-s5); }

.e-step__head {
    display: flex;
    align-items: center;
    gap: var(--e-s3);
    padding: var(--e-s4) var(--e-s5);
    border-bottom: 1px solid var(--e-line);
}

.e-step__num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid var(--e-line-strong);
    border-radius: 999px;
    font-family: var(--e-font-display);
    font-size: .95rem;
    color: var(--e-ink-soft);
}

.e-step__title {
    font-family: var(--e-font-display);
    font-size: 1.15rem;
}

.e-step__hint {
    margin-left: auto;
    font-size: .82rem;
    color: var(--e-ink-soft);
    text-align: right;
}

/* ── Tabla meta (datos de una reserva, un presupuesto o un trabajo) ── */

.e-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-s5);
    margin: var(--e-s5) 0 0;
    padding-top: var(--e-s4);
    border-top: 1px solid var(--e-line);
}

.e-meta div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.e-meta dt {
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--e-ink-soft);
}

.e-meta dd {
    margin: 0;
    font-family: var(--e-font-display);
    font-size: 1.05rem;
}

/* ── Vacío ── */

.e-empty {
    padding: var(--e-s7) var(--e-s5);
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius-lg);
    background: var(--e-surface);
    text-align: center;
}

.e-empty p {
    max-width: 48ch;
    margin: var(--e-s2) auto var(--e-s5);
    color: var(--e-ink-soft);
}

@media (max-width: 640px) {
    .e-wrap,
    .e-flash-zone { padding: 0 var(--e-s4); }
    .e-section { padding: var(--e-s7) 0; }
}

/* ─────────────────────────────────────────────
   Etapa 1: reservar (sección Agenda del diseño) y confirmación
   ───────────────────────────────────────────── */

.e-reserva {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--e-s6);
    align-items: start;
}

.e-reserva__datos {
    display: flex;
    flex-direction: column;
    gap: var(--e-s4);
}

.e-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-s4);
}

.e-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-s4);
}

.e-grid-2 > .e-full,
.e-grid-3 > .e-full { grid-column: 1 / -1; }

.e-reserva__enviar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--e-s2);
}

.e-formnote {
    font-size: .82rem;
    color: var(--e-ink-soft);
}

/* Campos nativos de fecha y hora: con JS los reemplaza el calendario. */
.e-reserva--js .e-reserva__nativo { display: none; }
.e-cal__js { display: none; }
.e-reserva--js .e-cal__js { display: block; }

/* ── Calendario (.cal del diseño) ── */

.e-cal { padding: var(--e-s5); }

.e-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--e-s4);
}

.e-cal__month {
    font-family: var(--e-font-display);
    font-size: 1.2rem;
}

.e-cal__nav {
    display: flex;
    gap: var(--e-s2);
}

.e-cal__nav button {
    width: var(--e-tap);
    height: var(--e-tap);
    border: 1px solid var(--e-line-strong);
    border-radius: var(--e-radius);
    background: transparent;
    color: var(--e-ink);
    font-size: 1.1rem;
    cursor: pointer;
}

.e-cal__nav button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.e-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.e-cal__dow {
    padding-bottom: var(--e-s2);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--e-ink-soft);
}

.e-cal__day {
    position: relative;
    min-height: var(--e-tap);
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: var(--e-radius);
    background: transparent;
    color: var(--e-ink-faint);
    font: inherit;
    font-size: .9rem;
    cursor: default;
}

.e-cal__day--open {
    background: var(--e-open-day);
    border-color: var(--e-line-strong);
    color: var(--e-ink);
    cursor: pointer;
}

.e-cal__day--open::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 18%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 999px;
    background: currentColor;
}

.e-cal__day--open:hover { border-color: var(--e-ink); }

.e-cal__day[aria-pressed="true"] {
    background: var(--e-accent);
    border-color: var(--e-accent);
    color: var(--e-on-accent);
}

.e-cal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-s4);
    margin-top: var(--e-s4);
    font-size: .78rem;
    color: var(--e-ink-soft);
}

.e-cal__legend span::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: -1px;
    border: 1px solid var(--e-line-strong);
}

.e-cal__legend .is-open::before { background: var(--e-open-day); }
.e-cal__legend .is-sel::before { background: var(--e-accent); border-color: var(--e-accent); }

.e-slots {
    margin-top: var(--e-s5);
    padding-top: var(--e-s4);
    border-top: 1px solid var(--e-line);
}

.e-slots__title {
    margin-bottom: var(--e-s3);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--e-ink-soft);
}

.e-slots__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-s2);
}

.e-slot {
    min-height: var(--e-tap);
    min-width: 72px;
    padding: 0 16px;
    border: 1px solid var(--e-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--e-ink);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}

.e-slot:hover { border-color: var(--e-ink); }

.e-slot[aria-pressed="true"] {
    background: var(--e-accent);
    border-color: var(--e-accent);
    color: var(--e-on-accent);
}

.e-cal__resumen {
    margin-top: var(--e-s4);
    font-family: var(--e-font-display);
    font-size: 1.05rem;
}

/* ── Tarjeta "Tu presupuesto" ── */

.e-presu {
    padding: var(--e-s5);
}

.e-presu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-s3);
}

.e-presu .e-meta { margin-top: var(--e-s4); }
.e-presu__nota { margin-top: var(--e-s3); }

/* Filas del calendario: semánticas (role="row") pero sin caja propia. */
.e-cal__row { display: contents; }

/* ── Confirmación ── */

.e-estado {
    max-width: 60ch;
    margin-bottom: var(--e-s5);
    font-size: 1.05rem;
    color: var(--e-ink-soft);
}

.e-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-s3);
    margin-top: var(--e-s6);
}

.e-texto-largo {
    margin-top: var(--e-s5);
    max-width: 65ch;
    white-space: pre-line;
    color: var(--e-ink-soft);
}

@media (max-width: 900px) {
    .e-reserva { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────────────────────────────────────
   Etapa 2: portfolio (sección Portafolio del diseño) e inicio
   ───────────────────────────────────────────── */

/* ── Chips de filtro ── */

.e-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-s2);
    margin: 0 0 var(--e-s6);
    padding: 0;
    list-style: none;
}

:where(.e-page) .e-chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--e-tap);
    padding: 0 18px;
    border: 1px solid var(--e-line-strong);
    border-radius: 999px;
    color: var(--e-ink);
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
}

.e-chip:hover { border-color: var(--e-ink); }

.e-chip[aria-current="page"] {
    background: var(--e-accent);
    border-color: var(--e-accent);
    color: var(--e-on-accent);
}

/* ── Destacado (.featured del diseño) ── */

.e-featured {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: var(--e-s6);
    align-items: center;
    margin-bottom: var(--e-s7);
}

.e-featured__media {
    overflow: hidden;
    border-radius: var(--e-radius-lg);
    background: var(--e-surface);
    aspect-ratio: 4 / 3;
}

.e-featured__media img,
.e-work__media img,
.e-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.e-featured h2 {
    margin: var(--e-s3) 0 var(--e-s3);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.e-featured p {
    max-width: 52ch;
    color: var(--e-ink-soft);
}

/* ── Galería ── */

.e-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-s4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.e-work { margin: 0; }

.e-work__media {
    overflow: hidden;
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius);
    background: var(--e-surface);
    aspect-ratio: 4 / 5;
}

.e-work figcaption {
    display: flex;
    align-items: baseline;
    gap: var(--e-s2);
    flex-wrap: wrap;
    margin-top: var(--e-s2);
}

.e-work__title {
    font-family: var(--e-font-display);
    font-size: 1.05rem;
}

.e-work__cat {
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--e-ink-soft);
}

.e-more {
    display: inline-block;
    margin-top: var(--e-s5);
}

/* ── Banda de contacto ── */

.e-contacto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--e-s6);
    align-items: start;
}

.e-contacto .e-meta {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.e-contacto__accion { margin-top: var(--e-s5); }

/* ── Inicio: hero (.hero del diseño) ── */

.e-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e-s7);
    align-items: center;
}

.e-hero--solo { grid-template-columns: minmax(0, 1fr); }

.e-hero h1 { max-width: 11ch; }

.e-hero__lede {
    max-width: 46ch;
    margin: var(--e-s4) 0 var(--e-s5);
    font-size: 1.05rem;
    color: var(--e-ink-soft);
}

.e-hero__media {
    overflow: hidden;
    border-radius: var(--e-radius-lg);
    background: var(--e-surface);
    aspect-ratio: 4 / 5;
}

/* ── Inicio: cómo funciona (D6) ── */

.e-pasos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-s5);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.e-paso {
    position: relative;
    padding-top: var(--e-s5);
    border-top: 1px solid var(--e-line);
}

.e-paso .e-step__num {
    position: absolute;
    top: -14px;
    left: 0;
    background: var(--e-surface-2);
}

.e-paso h3 { margin: var(--e-s3) 0 var(--e-s2); }

.e-paso p {
    font-size: .95rem;
    color: var(--e-ink-soft);
}

.e-cierre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-s5);
}

.e-cierre p { color: var(--e-ink-soft); }

@media (max-width: 900px) {
    .e-featured,
    .e-hero,
    .e-contacto { grid-template-columns: minmax(0, 1fr); }
    .e-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .e-hero__media { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
    .e-gallery { grid-template-columns: minmax(0, 1fr); }
    /* Chips en una fila con scroll horizontal (D10). */
    .e-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: calc(-1 * var(--e-s4));
        padding-inline: var(--e-s4);
    }
    /* Pasos apilados, con la línea a la izquierda. */
    .e-pasos { grid-template-columns: minmax(0, 1fr); }
    .e-paso {
        padding: 0 0 0 var(--e-s6);
        border-top: 0;
        border-left: 1px solid var(--e-line);
    }
    .e-paso .e-step__num { top: 0; left: -14px; }
}

@media (max-width: 640px) {
    .e-grid-2,
    .e-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .e-reserva__enviar { align-items: stretch; }
    .e-reserva__enviar .e-btn { width: 100%; }
    .e-cal { padding: var(--e-s4); }
    .e-cal__grid { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .e-btn, .e-nav__links a, .e-field input, .e-field select, .e-field textarea { transition: none; }
    html { scroll-behavior: auto; }
}

.e-empty .e-acciones {
    justify-content: center;
    margin-top: 0;
}

.e-acciones--pegadas { margin-top: 0; }

.e-hero--solo h1 { max-width: 16ch; }

/* ── Inicio: banner hero a todo el ancho, con los números del estudio ──
   La portada va de fondo y un degradé del color de fondo la tapa del lado
   del texto, así se lee en los dos temas. Sin portada, fondo con un brillo. */

.e-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: min(86vh, 760px);
    padding: var(--e-s9) 0 var(--e-s7);
    background:
        radial-gradient(110% 80% at 88% 8%, color-mix(in srgb, var(--e-accent) 20%, transparent), transparent 62%),
        var(--e-surface-2);
    border-bottom: 1px solid var(--e-line);
}

.e-banner__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.e-banner:not(.e-hero--solo)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, var(--e-bg) 0%, color-mix(in srgb, var(--e-bg) 82%, transparent) 42%,
                        color-mix(in srgb, var(--e-bg) 25%, transparent) 100%),
        linear-gradient(0deg, var(--e-bg) 0%, transparent 50%);
}

.e-banner__in {
    display: grid;
    gap: var(--e-s7);
    width: 100%;
}

.e-banner__texto { max-width: 640px; }

.e-banner h1 {
    max-width: 12ch;
    font-size: clamp(2.6rem, 6.2vw, 4.8rem);
    line-height: 1.02;
}

.e-banner .e-hero__lede { max-width: 50ch; }

.e-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e-s5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.e-stat {
    display: flex;
    flex-direction: column;
    gap: var(--e-s2);
    padding-top: var(--e-s4);
    border-top: 1px solid var(--e-line-strong);
}

.e-stat__valor {
    font-family: var(--e-font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
    color: var(--e-accent);
}

/* El durazno no contrasta sobre el crema: en claro los números van en marrón. */
:root[data-theme="light"] .e-stat__valor { color: var(--e-secondary); }

.e-stat__label {
    max-width: 20ch;
    font-size: .88rem;
    color: var(--e-ink-soft);
}

/* Botón de cada paso de "Cómo funciona", alineado abajo en las tres columnas. */
.e-paso {
    display: flex;
    flex-direction: column;
}

.e-paso p { flex-grow: 1; }

.e-paso__btn {
    align-self: flex-start;
    margin-top: var(--e-s4);
}

@media (max-width: 900px) {
    .e-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .e-banner {
        min-height: 0;
        padding: var(--e-s8) 0 var(--e-s6);
    }
    .e-banner:not(.e-hero--solo)::before {
        background: linear-gradient(0deg, var(--e-bg) 10%, color-mix(in srgb, var(--e-bg) 72%, transparent) 100%);
    }
    .e-banner .e-acciones .e-btn { flex: 1 1 auto; }
    .e-paso__btn { align-self: stretch; }
}

/* ─────────────────────────────────────────────
   Etapa 3: presupuesto (sección Presupuestador del diseño)
   ───────────────────────────────────────────── */

.e-presupuesto {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--e-s5);
    align-items: start;
}

.e-presupuesto__pasos {
    display: flex;
    flex-direction: column;
    gap: var(--e-s4);
}

.e-presupuesto__idea {
    display: flex;
    flex-direction: column;
    gap: var(--e-s4);
}

.e-field input[type="file"] {
    padding: 10px 14px;
    font-size: .88rem;
}

/* ── Etapa 3a: mapa del cuerpo y nivel de detalle ── */

.e-tatuaje {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--e-s5);
    align-items: start;
}

.e-tatuaje__campos {
    display: flex;
    flex-direction: column;
    gap: var(--e-s4);
}

.e-mapa {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-s3);
}

.e-fig { text-align: center; }

.e-fig__label {
    margin-bottom: var(--e-s2);
    font-size: .66rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--e-ink-soft);
}

.e-fig__svg {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
}

.e-fig__piedra {
    fill: var(--e-surface-2);
    stroke: var(--e-line-strong);
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.e-fig__cara {
    fill: var(--e-surface);
    stroke: var(--e-line-strong);
    stroke-width: 1.2;
}

.e-fig__pliegue,
.e-fig__pliegue path {
    fill: none;
    stroke: var(--e-line);
    stroke-width: .9;
}

.e-fig__marca {
    fill: var(--e-surface);
    stroke: var(--e-line-strong);
    stroke-width: 1.4;
    cursor: pointer;
    transition: fill .15s, stroke .15s;
}

.e-fig__marca:hover { stroke: var(--e-ink); }

.e-fig__marca.is-on {
    fill: var(--e-accent);
    stroke: var(--e-accent);
}

.e-detalles {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--e-line);
}

.e-detalles__titulo {
    float: left;
    width: 100%;
    margin-bottom: var(--e-s3);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--e-ink-soft);
}

.e-detalles__opciones {
    clear: both;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e-s3);
}

.e-detalle {
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: var(--e-tap);
    padding: var(--e-s3);
    border: 1px solid var(--e-line-strong);
    border-radius: var(--e-radius);
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
}

.e-detalle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.e-detalle__nombre {
    font-family: var(--e-font-display);
    font-size: 1.05rem;
    color: var(--e-ink);
}

.e-detalle__desc {
    font-size: .8rem;
    color: var(--e-ink-soft);
}

.e-detalle:hover { border-color: var(--e-ink); }

.e-detalle:has(input:checked) {
    background: var(--e-open-day);
    border-color: var(--e-accent);
}

.e-detalle:has(input:focus-visible) {
    outline: 2px solid var(--e-focus);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .e-tatuaje { grid-template-columns: minmax(0, 1fr); }
    .e-detalles__opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .e-fig__marca { transition: none; }
}

.e-total {
    position: sticky;
    top: 96px;
    padding: var(--e-s5);
}

.e-total__valor {
    margin: var(--e-s2) 0 var(--e-s3);
    font-family: var(--e-font-display);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    line-height: 1.15;
}

.e-total__valor .q-placeholder {
    display: block;
    font-family: var(--e-font-ui);
    font-size: .95rem;
    line-height: 1.5;
    color: var(--e-ink-soft);
}

.e-total__nota {
    margin-bottom: var(--e-s3);
    font-size: .82rem;
    color: var(--e-ink-soft);
}

.e-total .e-btn { margin-top: var(--e-s2); }

/* Confirmación de presupuesto */
.e-rango {
    font-family: var(--e-font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.e-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-s2);
    margin: var(--e-s3) 0 0;
    padding: 0;
    list-style: none;
}

.e-thumbs img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius);
}

@media (max-width: 900px) {
    .e-presupuesto { grid-template-columns: minmax(0, 1fr); }
    .e-total { position: static; }
}

/* Celular: el total queda en una barra fija abajo, con el botón (D10).
   El body deja lugar para que la barra no tape el último campo. */
@media (max-width: 640px) {
    .e-page--total { padding-bottom: 132px; }
    .e-total {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px var(--e-s3);
        padding: var(--e-s3) var(--e-s4);
        border-radius: 0;
        border-width: 1px 0 0;
        background: var(--e-surface);
    }
    .e-total .e-eyebrow {
        grid-column: 1;
        margin: 0;
        font-size: .6rem;
        letter-spacing: .2em;
        white-space: nowrap;
    }
    .e-total__valor { grid-column: 1; margin: 0; font-size: 1.1rem; white-space: nowrap; }
    .e-total__valor .q-placeholder { font-size: .78rem; white-space: normal; }
    .e-total__nota { display: none; }
    .e-total .e-btn {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: auto;
        margin: 0;
        padding: 0 14px;
        font-size: .82rem;
    }
}
.e-cierre p { margin-top: var(--e-s2); }

/* ─────────────────────────────────────────────
   Etapa 4: páginas legales y de error
   ───────────────────────────────────────────── */

/* Una columna de lectura de 65–75 caracteres (D11/Read). */
.e-lectura { max-width: calc(70ch + 2 * var(--e-s5)); }

.e-lectura__titulo {
    margin: var(--e-s2) 0 var(--e-s6);
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
}

.e-legal {
    color: var(--e-ink-soft);
    line-height: 1.7;
}

/* Primer párrafo: versión y titular del texto. */
.e-legal > p:first-child {
    padding-bottom: var(--e-s4);
    margin-bottom: var(--e-s5);
    border-bottom: 1px solid var(--e-line);
    font-size: .82rem;
    letter-spacing: .02em;
}

.e-legal h2,
.e-legal h3 {
    margin: var(--e-s6) 0 var(--e-s3);
    font-family: var(--e-font-display);
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--e-ink);
}

.e-legal p,
.e-legal ul { margin: 0 0 var(--e-s4); }
.e-legal ul { padding-left: 1.3rem; }
.e-legal li { margin-bottom: var(--e-s2); }
.e-legal strong { color: var(--e-ink); font-weight: 600; }

.e-error {
    max-width: 720px;
    padding-block: var(--e-s7);
}

.e-error h1 { margin: var(--e-s2) 0 var(--e-s4); }

.e-error p {
    max-width: 52ch;
    font-size: 1.05rem;
    color: var(--e-ink-soft);
}

/* ─────────────────────────────────────────────
   Etapa 5: panel admin (D13: marca + densidad de herramienta)
   Mismos tokens y componentes que el sitio; títulos de sección en Inter,
   Fraunces solo en el nombre de la página, tablas compactas.
   ───────────────────────────────────────────── */

.e-admin { padding-block: var(--e-s6) var(--e-s8); }

.e-admin__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--e-s3) var(--e-s5);
    margin-bottom: var(--e-s5);
    padding-bottom: var(--e-s4);
    border-bottom: 1px solid var(--e-line);
}

.e-admin__head h1 {
    font-size: clamp(1.8rem, 3vw, 2.3rem);
}

.e-admin__sub {
    margin-top: var(--e-s1);
    font-size: .9rem;
    color: var(--e-ink-soft);
}

.e-admin-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-s1) var(--e-s4);
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.e-page) .e-admin-nav a,
.e-admin-nav button {
    display: inline-flex;
    align-items: center;
    min-height: var(--e-tap);
    padding: 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    color: var(--e-ink-soft);
    font: inherit;
    font-size: .9rem;
    text-decoration: none;
    cursor: pointer;
}

.e-admin-nav a:hover,
.e-admin-nav button:hover { color: var(--e-ink); }

.e-admin-nav a[aria-current="page"] {
    color: var(--e-ink);
    border-bottom-color: var(--e-accent);
}

.e-admin__h2 {
    margin: var(--e-s6) 0 var(--e-s3);
    font-family: var(--e-font-ui);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

.e-admin__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-s3);
    margin-bottom: var(--e-s4);
}

.e-admin__barra .e-chips { margin: 0; }

.e-chip__num {
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.e-integraciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-s2);
    margin-bottom: var(--e-s4);
}

/* Estados de integraciones dentro de la tabla */
.e-int {
    display: block;
    font-size: .8rem;
    color: var(--e-ink-soft);
}

.e-int--ok { color: var(--e-ink); }
.e-int--warn { color: var(--e-accent); }
.e-int--err { color: var(--e-error); }

/* ── Tabla compacta ── */

.e-tabla-wrap {
    overflow-x: auto;
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius-lg);
    background: var(--e-surface);
}

.e-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

.e-tabla th {
    padding: var(--e-s3) var(--e-s3);
    border-bottom: 1px solid var(--e-line-strong);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: left;
    color: var(--e-ink-soft);
    white-space: nowrap;
}

.e-tabla td {
    padding: 10px var(--e-s3);
    border-bottom: 1px solid var(--e-line);
    vertical-align: top;
}

.e-tabla tr:last-child td { border-bottom: 0; }
.e-tabla tbody tr:hover { background: var(--e-surface-2); }

.e-tabla__sec {
    display: block;
    font-size: .8rem;
    color: var(--e-ink-soft);
}

.e-tabla__vacia {
    padding: var(--e-s6) var(--e-s4) !important;
    text-align: center;
    color: var(--e-ink-soft);
}

.e-acciones-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.e-acciones-fila form { margin: 0; }

.e-tag--sm {
    min-height: 22px;
    padding: 1px 10px;
    font-size: .6rem;
}

/* ── Detalle de presupuesto ── */

.e-admin-detalle {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: var(--e-s5);
    align-items: start;
}

.e-admin-detalle__acciones {
    display: flex;
    flex-direction: column;
    gap: var(--e-s2);
}

.e-admin-detalle__acciones form { margin: 0; }

.e-separador {
    height: 1px;
    margin: var(--e-s2) 0;
    background: var(--e-line);
}

/* ── Portfolio y formularios del admin ── */

.e-admin-grid-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--e-s4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.e-admin-foto img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--e-radius-lg) var(--e-radius-lg) 0 0;
}

.e-admin-foto .e-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--e-s2);
    padding: var(--e-s3);
}

.e-admin-foto .e-field input { min-height: 38px; padding: 8px 10px; font-size: .85rem; }

.e-admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--e-s4);
}

.e-admin-form__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-s2);
}

.e-dias {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-s2);
}

.e-dia {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--e-tap);
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--e-line-strong);
    border-radius: 999px;
    font-size: .88rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--e-ink);
    cursor: pointer;
}

.e-dia:has(input:checked) {
    background: var(--e-accent);
    border-color: var(--e-accent);
    color: var(--e-on-accent);
}

.e-ayuda {
    padding: var(--e-s3) var(--e-s4);
    border-left: 2px solid var(--e-accent);
    background: var(--e-surface-2);
    font-size: .88rem;
    color: var(--e-ink-soft);
}

.e-login {
    max-width: 420px;
    margin: var(--e-s8) auto;
    padding: var(--e-s6);
}

.e-login h1 { font-size: 2rem; margin-bottom: var(--e-s2); }

@media (max-width: 900px) {
    .e-admin-detalle { grid-template-columns: minmax(0, 1fr); }
}

/* Celular: cada fila de tabla pasa a un bloque apilado (label: valor). */
@media (max-width: 640px) {
    .e-tabla-wrap { overflow: visible; border: 0; background: none; }
    .e-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .e-tabla,
    .e-tabla tbody,
    .e-tabla tr,
    .e-tabla td { display: block; width: 100%; }
    .e-tabla tr {
        margin-bottom: var(--e-s3);
        border: 1px solid var(--e-line);
        border-radius: var(--e-radius-lg);
        background: var(--e-surface);
    }
    .e-tabla td {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: var(--e-s2);
        border-bottom: 1px solid var(--e-line);
    }
    .e-tabla td::before {
        content: attr(data-label);
        font-size: .66rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--e-ink-soft);
    }
    .e-tabla td.e-tabla__vacia { display: block; }
    .e-tabla td.e-tabla__vacia::before { content: none; }
}

.e-admin__h2--pegado { margin: 0; }
.e-admin-form--compacto { gap: var(--e-s2); }
.e-admin__restaurar { margin-top: var(--e-s6); }

/* Fieldsets con forma de tarjeta: la legend va adentro, no sobre el borde. */
fieldset.e-card {
    margin: 0;
    min-width: 0;
}

fieldset.e-card > legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: var(--e-s4);
}

fieldset.e-card > legend + * { clear: both; }

.e-admin .e-ayuda { margin-bottom: var(--e-s4); }

/* Días de la agenda: el chip entero es la casilla. */
.e-dia { position: relative; }

.e-dia input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.e-dia:has(input:focus-visible) {
    outline: 2px solid var(--e-focus);
    outline-offset: 2px;
}

/* La fila de filtros puede scrollear sola sin ensanchar la página. */
.e-admin__barra > nav { min-width: 0; max-width: 100%; }

/* ─────────────────────────────────────────────
   Etapa 7: selector de tema (verde por defecto, claro opcional)
   ───────────────────────────────────────────── */

.e-tema {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--e-tap);
    height: var(--e-tap);
    border: 1px solid var(--e-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--e-ink);
    cursor: pointer;
    transition: border-color .18s, background-color .18s;
}

.e-tema[hidden] { display: none; }
.e-tema:hover { border-color: var(--e-ink); }

.e-tema svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* En verde se ofrece el sol (pasar a claro); en claro, la luna (volver al verde). */
.e-tema__luna { display: none; }
:root[data-theme="light"] .e-tema__sol { display: none; }
:root[data-theme="light"] .e-tema__luna { display: block; }

@media (max-width: 900px) {
    .e-tema { margin-left: auto; }
}

/* ── Menú desplegable del celular ── */

.e-menu-btn {
    display: none;
    place-items: center;
    flex: 0 0 auto;
    width: var(--e-tap);
    height: var(--e-tap);
    border: 1px solid var(--e-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--e-ink);
    cursor: pointer;
}

.e-menu-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.e-menu-btn__cerrar { display: none; }
.e-menu-btn[aria-expanded="true"] .e-menu-btn__abrir { display: none; }
.e-menu-btn[aria-expanded="true"] .e-menu-btn__cerrar { display: inline; }

.e-menu {
    border-top: 1px solid var(--e-line);
    background: var(--e-bg);
}

.e-menu[hidden] { display: none; }

.e-menu ul {
    max-width: var(--e-maxw);
    margin: 0 auto;
    padding: var(--e-s2) var(--e-s4) var(--e-s4);
    list-style: none;
}

.e-menu a {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid var(--e-line);
    font-family: var(--e-font-display);
    font-size: 1.35rem;
    color: var(--e-ink);
    text-decoration: none;
}

.e-menu li:last-child a { border-bottom: 0; color: var(--e-accent); }
:root[data-theme="light"] .e-menu li:last-child a { color: var(--e-secondary); }
.e-menu a[aria-current="page"],
.e-nav__links a[aria-current="page"] { color: var(--e-ink); border-bottom-color: var(--e-ink); }
.e-menu a[aria-current="page"] { border-bottom-color: var(--e-line); text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 900px) {
    .e-menu-btn:not([hidden]) { display: inline-grid; }
}

/* En pantallas grandes el menú no existe aunque haya quedado abierto. */
@media (min-width: 901px) {
    .e-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .e-tema { transition: none; }
}

/* Celular: marca, tema y "Reservar turno" tienen que entrar en 320–375px. */
@media (max-width: 640px) {
    .e-nav__in { gap: var(--e-s3); }
    .e-nav .e-btn--accent { padding: 0 14px; font-size: .85rem; }
}

@media (max-width: 400px) {
    .e-nav .e-brand__mark { font-size: 1.2rem; letter-spacing: .14em; }
    .e-nav .e-brand__sub { letter-spacing: .24em; }
}

@media (max-width: 360px) {
    .e-nav__in { padding: 12px var(--e-s3); gap: var(--e-s2); }
    .e-nav .e-brand__mark { font-size: 1.05rem; letter-spacing: .1em; }
    .e-nav .e-brand__sub { font-size: .45rem; letter-spacing: .18em; }
    .e-nav .e-btn--accent { padding: 0 10px; font-size: .8rem; }
}

/* Presupuesto → reserva: botón secundario debajo del principal, y el rango
   estimado en la tarjeta "Tu presupuesto" de reservar. */
.e-total .e-total__secundario { margin-top: var(--e-s2); }
.e-presu__rango { margin-top: var(--e-s3); font-size: clamp(1.4rem, 2.2vw, 1.8rem); }

@media (max-width: 640px) {
    /* En la barra fija del celular entra solo el botón principal; el secundario
       queda al final del formulario. */
    .e-total .e-total__secundario { display: none; }
}

/* ─────────────────────────────────────────────
   Seña con Mercado Pago: página del QR
   ───────────────────────────────────────────── */

.e-pago__grid {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--e-s6);
    align-items: start;
}

.e-pago__qr { text-align: center; }

/* El QR va siempre negro sobre blanco, en los dos temas, para que se escanee. */
.e-pago__codigo {
    margin: var(--e-s3) auto var(--e-s4);
    max-width: 260px;
    padding: var(--e-s3);
    border-radius: var(--e-radius);
    background: #fff;
}

.e-pago__codigo svg {
    display: block;
    width: 100%;
    height: auto;
}

.e-pago__codigo svg path { fill: #000; }
.e-pago__qr .e-rango { margin-bottom: var(--e-s4); }
.e-pago__nota { margin-top: var(--e-s4); }

@media (max-width: 760px) {
    .e-pago__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────────────────────────────────────
   Tienda: catálogo, producto, pedido y gift cards
   ───────────────────────────────────────────── */

/* Gift card dibujada: una tarjeta "física" con los colores de la marca, igual en
   los dos temas. Las medidas van en cqi para que escale con el ancho de la tarjeta. */
.e-giftcard {
    container-type: inline-size;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 1.586;
    padding: 7% 8%;
    border: 1px solid rgba(249, 210, 186, .35);
    border-radius: 14px;
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(249, 210, 186, .30), transparent 60%),
        linear-gradient(135deg, #1D4533 0%, #12271D 58%, #23402F 100%);
    color: #F3E6DA;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
}

/* Anillos finos de fondo, como un trazo de línea fina. */
.e-giftcard::after {
    content: '';
    position: absolute;
    right: -18%;
    bottom: -45%;
    width: 75%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 9px, rgba(249, 210, 186, .14) 9px 10px);
    pointer-events: none;
}

.e-giftcard__marca {
    font-family: var(--e-font-display);
    font-size: 9cqi;
    line-height: 1;
}

.e-giftcard__tipo {
    position: absolute;
    top: 9%;
    right: 8%;
    font-size: 3.4cqi;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #F9D2BA;
}

.e-giftcard__monto {
    margin-top: auto;
    font-family: var(--e-font-display);
    font-size: 13cqi;
    line-height: 1;
    color: #F9D2BA;
}

.e-giftcard__para {
    margin-top: 2cqi;
    font-size: 4cqi;
    color: rgba(243, 230, 218, .8);
}

.e-giftcard__codigo {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    margin-top: 3cqi;
    padding: 1.4cqi 3cqi;
    border: 1px dashed rgba(249, 210, 186, .6);
    border-radius: 6px;
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 5.2cqi;
    letter-spacing: .12em;
    user-select: all;
}

/* Banda "Regalá un tatuaje" arriba del catálogo. */
.e-regalo {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--e-s6);
    align-items: center;
    margin-bottom: var(--e-s7);
    padding: var(--e-s7);
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius-lg);
    background:
        radial-gradient(80% 120% at 100% 50%, color-mix(in srgb, var(--e-accent) 16%, transparent), transparent 65%),
        var(--e-surface-2);
    color: var(--e-ink);
    text-decoration: none;
}

.e-regalo h2 {
    margin: var(--e-s3) 0;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
}

.e-regalo p {
    max-width: 44ch;
    margin-bottom: var(--e-s5);
    color: var(--e-ink-soft);
}

.e-regalo__cartas {
    position: relative;
    height: 280px;
}

.e-regalo__cartas .e-giftcard {
    position: absolute;
    width: min(330px, 78%);
    transition: transform .4s ease;
}

.e-regalo__cartas .e-giftcard:first-child { left: 0; top: 4%; transform: rotate(-8deg); }
.e-regalo__cartas .e-giftcard:last-child { right: 0; bottom: 4%; transform: rotate(5deg); }
.e-regalo__cartas .e-giftcard:only-child { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-5deg); }
.e-regalo:hover .e-giftcard:first-child { transform: rotate(-11deg) translateY(-6px); }
.e-regalo:hover .e-giftcard:last-child { transform: rotate(8deg) translateY(6px); }
.e-regalo:hover .e-giftcard:only-child { transform: translate(-50%, -54%) rotate(-2deg); }

/* Catálogo */
.e-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--e-s6) var(--e-s5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.e-prod {
    display: block;
    color: var(--e-ink);
    text-decoration: none;
}

.e-prod__media {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius-lg);
    background: var(--e-surface);
}

.e-prod__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.e-prod__media .e-giftcard {
    width: 84%;
    transform: rotate(-4deg);
    transition: transform .4s ease;
}

.e-prod:hover .e-prod__media img { transform: scale(1.04); }
.e-prod:hover .e-prod__media .e-giftcard { transform: rotate(0) scale(1.03); }
.e-prod:hover .e-prod__nombre { text-decoration: underline; text-underline-offset: 3px; }

.e-prod__tag {
    position: absolute;
    top: var(--e-s3);
    left: var(--e-s3);
}

/* Las de contorno llevan fondo para leerse sobre la foto; las de acento ya tienen el suyo. */
.e-prod__tag:not(.e-tag--accent) { background: var(--e-bg); }

.e-prod--agotado .e-prod__media img { opacity: .45; filter: grayscale(1); }

.e-prod__sin-foto {
    font-family: var(--e-font-display);
    font-size: 5rem;
    color: var(--e-ink-faint);
}

.e-prod__info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e-s3);
    margin-top: var(--e-s3);
}

.e-prod__nombre {
    font-family: var(--e-font-display);
    font-size: 1.15rem;
}

.e-prod__precio {
    flex: 0 0 auto;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--e-ink-soft);
}

/* Producto */
.e-volver {
    display: inline-block;
    margin-bottom: var(--e-s5);
    color: var(--e-ink-soft);
}

.e-producto {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--e-s7);
    align-items: start;
}

.e-producto__media {
    overflow: hidden;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius-lg);
    background: var(--e-surface);
}

.e-producto__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.e-producto__media .e-giftcard { width: 80%; transform: rotate(-3deg); }

.e-producto__info h1 { margin-bottom: var(--e-s2); }

.e-producto__desc {
    margin: var(--e-s4) 0 var(--e-s5);
    white-space: pre-line;
    color: var(--e-ink-soft);
}

.e-compra {
    display: grid;
    gap: var(--e-s4);
    margin-top: var(--e-s5);
}

/* Pedido */
.e-giftcards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--e-s5);
    margin: var(--e-s5) 0;
    padding: 0;
    list-style: none;
}

.e-giftcards li { display: grid; gap: var(--e-s2); justify-items: start; }

.e-dedicatoria {
    margin: 0 0 var(--e-s5);
    padding-left: var(--e-s4);
    border-left: 2px solid var(--e-accent);
    font-family: var(--e-font-display);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--e-ink-soft);
}

/* Admin de la tienda */
.e-canje {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--e-s3);
}

.e-canje .e-field { flex: 1 1 240px; max-width: 360px; }

.e-canje__resultado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-s3);
    margin-top: var(--e-s4);
    padding-top: var(--e-s4);
    border-top: 1px solid var(--e-line);
}

.e-canje__resultado form { margin: 0; }

.e-check--campo { align-self: end; min-height: var(--e-tap); }

.e-admin-productos {
    display: grid;
    gap: var(--e-s3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.e-admin-prod {
    display: flex;
    align-items: center;
    gap: var(--e-s3);
    min-height: var(--e-tap);
    padding: var(--e-s3) var(--e-s4);
    cursor: pointer;
    list-style: none;
}

.e-admin-prod::-webkit-details-marker { display: none; }

.e-admin-prod img,
.e-admin-prod__sin {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--e-radius);
    object-fit: cover;
}

.e-admin-prod__sin {
    display: grid;
    place-items: center;
    background: var(--e-surface-2);
    font-family: var(--e-font-display);
    color: var(--e-ink-soft);
}

.e-admin-prod__nombre { flex: 1 1 auto; }

.e-admin-prod__editar {
    font-size: .85rem;
    color: var(--e-ink-soft);
}

details[open] > .e-admin-prod { border-bottom: 1px solid var(--e-line); }

@media (max-width: 900px) {
    .e-regalo,
    .e-producto { grid-template-columns: minmax(0, 1fr); }
    .e-regalo { padding: var(--e-s6); }
    .e-regalo__cartas { height: 230px; }
}

@media (max-width: 640px) {
    .e-productos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--e-s5) var(--e-s3);
    }
    .e-prod__info { flex-direction: column; gap: 2px; }
    .e-prod__nombre { font-size: 1rem; }
    .e-regalo { padding: var(--e-s5); }
    .e-regalo__cartas { height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
    .e-prod__media img,
    .e-prod__media .e-giftcard,
    .e-regalo__cartas .e-giftcard { transition: none; }
}

/* ─────────────────────────────────────────────
   Sobre mí
   ───────────────────────────────────────────── */

.e-sobre {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--e-s7);
    align-items: center;
}

.e-sobre--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

.e-sobre__foto {
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--e-radius-lg);
    background: var(--e-surface);
}

.e-sobre__foto img,
.e-sobre__galeria img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.e-sobre__sub {
    margin: var(--e-s5) 0 var(--e-s2);
    font-size: 1.25rem;
}

.e-sobre__parrafo {
    max-width: 60ch;
    white-space: pre-line;
    color: var(--e-ink-soft);
}

.e-sobre__galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--e-s4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.e-sobre__galeria li {
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius);
}

@media (max-width: 900px) {
    .e-sobre { grid-template-columns: minmax(0, 1fr); gap: var(--e-s5); }
    .e-sobre__foto { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
    .e-sobre__galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-s2); }
}

/* Gift card personalizada: vista previa con la frase y la imagen final */
.e-gc-preview {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    container-type: inline-size;
}

.e-gc-preview img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--e-radius-lg);
}

/* Misma ubicación que en la imagen que arma el servidor (1080×1920). */
.e-gc-preview__codigo,
.e-gc-preview__frase {
    position: absolute;
    left: 17.4%;
    right: 17.4%;
    text-align: center;
    font-family: 'Poppins', var(--e-font-ui);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}

.e-gc-preview__codigo { top: 15.2%; color: #fff; font-size: 5.6cqi; font-weight: 500; letter-spacing: .04em; }
.e-gc-preview__frase { top: 70.2%; color: #8A1325; font-size: 5.6cqi; }

.e-gc-final {
    display: grid;
    gap: var(--e-s3);
    justify-items: center;
}

.e-gc-final img {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: var(--e-radius-lg);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
}

/* Poppins (OFL, en static/fonts): la tipografía de la gift card. */
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }