/* ============================================================
   Artisapp — Hoja de estilos base (Fase 1)
   Mobile-first · Variables CSS · Sin dependencias de build
   Identidad: tinta índigo (oficio del tinte) + ocre mostaza
   Firma visual: la "puntada" — borde discontinuo tipo costura
   ============================================================ */

:root {
    /* Paleta */
    --papel:        #F7F4ED;   /* fondo, papel de estraza claro */
    --tinta:        #22303C;   /* texto principal, azul tinta   */
    --indigo:       #2E4A62;   /* primario, índigo de tinte     */
    --indigo-hover: #243B4F;
    --ocre:         #C08A2D;   /* acento, mostaza/latón         */
    --linea:        #DFD8CA;   /* bordes y divisores            */
    --blanco:       #FFFFFF;
    --exito:        #2F6B4F;
    --error:        #A23B2E;

    /* Tipografía */
    --f-display: "Young Serif", Georgia, serif;
    --f-body: "Karla", -apple-system, "Segoe UI", sans-serif;

    /* Escala */
    --radius: 10px;
    --container: 1120px;
    --puntada: 1.5px dashed color-mix(in srgb, var(--indigo) 45%, transparent);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--tinta);
    background: var(--papel);
}

h1, h2, h3 {
    font-family: var(--f-display);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 .5em;
}

h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); }
h3 { font-size: 1.15rem; }

a { color: var(--indigo); }

img { max-width: 100%; height: auto; display: block; }

.container {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
}

/* ---------- Accesibilidad ---------- */

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

.skip-link {
    position: absolute; top: -100%; left: 1rem;
    background: var(--tinta); color: var(--blanco);
    padding: .5rem 1rem; border-radius: 0 0 var(--radius) var(--radius);
    z-index: 100;
}
.skip-link:focus { top: 0; }

:focus-visible {
    outline: 3px solid var(--ocre);
    outline-offset: 2px;
}

/* ---------- Botones ---------- */

.btn {
    display: inline-block;
    padding: .65rem 1.4rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font: 700 1rem var(--f-body);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.btn--primary { background: var(--indigo); color: var(--blanco); }
.btn--primary:hover { background: var(--indigo-hover); }

.btn--ghost {
    background: transparent;
    color: var(--indigo);
    border-color: var(--indigo);
}
.btn--ghost:hover { background: color-mix(in srgb, var(--indigo) 8%, transparent); }

.btn--light { background: var(--papel); color: var(--tinta); }

.link-button {
    background: none; border: 0; padding: 0;
    color: var(--indigo); font: inherit;
    text-decoration: underline; cursor: pointer;
}

.inline-form { display: inline; }

/* ---------- Cabecera ---------- */

.site-header {
    background: var(--papel);
    border-bottom: var(--puntada);
    position: sticky; top: 0; z-index: 50;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .8rem;
    flex-wrap: wrap;
}

.logo {
    font-family: var(--f-display);
    font-size: 1.45rem;
    color: var(--tinta);
    text-decoration: none;
}
.logo span { color: var(--ocre); }
.logo--footer { margin: 0 0 .4rem; font-size: 1.3rem; }

.nav-toggle {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    background: none; border: 1px solid var(--linea);
    border-radius: var(--radius); cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    content: ""; display: block;
    width: 20px; height: 2px; background: var(--tinta);
    position: relative;
}
.nav-toggle__bar::before { position: absolute; top: -6px; }
.nav-toggle__bar::after  { position: absolute; top: 6px; }

.site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: .8rem;
    padding-block: .8rem 1.2rem;
}
.site-nav.is-open { display: flex; }
.site-nav a { text-decoration: none; color: var(--tinta); font-weight: 500; }
.site-nav a:hover { color: var(--indigo); text-decoration: underline; }
.site-nav__artisan { color: var(--ocre) !important; font-weight: 700 !important; }

@media (min-width: 800px) {
    .nav-toggle { display: none; }
    .site-nav {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        width: auto;
        gap: 1.4rem;
        padding: 0;
    }
}

/* ---------- Flash ---------- */

.flash {
    padding: .8rem 1.2rem;
    text-align: center;
    font-weight: 500;
    color: var(--blanco);
}
.flash--success { background: var(--exito); }
.flash--error   { background: var(--error); }

/* ---------- Hero ---------- */

.hero {
    background:
        radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--ocre) 14%, transparent), transparent 60%),
        var(--indigo);
    color: var(--blanco);
    padding-block: clamp(3rem, 8vw, 5.5rem);
}

.hero__inner { max-width: 720px; }

.hero__eyebrow {
    margin: 0 0 1rem;
    font-size: .85rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--blanco) 75%, var(--indigo));
}

.hero__subtitle {
    font-size: 1.1rem;
    max-width: 55ch;
    color: color-mix(in srgb, var(--blanco) 88%, var(--indigo));
}

.hero__search {
    margin-top: 1.8rem;
    display: grid;
    gap: .6rem;
    background: var(--blanco);
    padding: .7rem;
    border-radius: calc(var(--radius) + 4px);
}

.hero__search input {
    border: 1px solid var(--linea);
    border-radius: var(--radius);
    padding: .7rem .9rem;
    font: 1rem var(--f-body);
    width: 100%;
}

@media (min-width: 720px) {
    .hero__search { grid-template-columns: 1.4fr 1fr auto; align-items: stretch; }
}

/* ---------- Secciones ---------- */

.section { padding-block: clamp(2.2rem, 6vw, 4rem); }

.section__title { margin-bottom: 1.2rem; }
.section__title::after {
    content: "";
    display: block;
    width: 64px;
    margin-top: .5rem;
    border-bottom: var(--puntada);
}

.section__note { color: color-mix(in srgb, var(--tinta) 55%, var(--papel)); font-style: italic; }

/* ---------- Pasos ---------- */

.steps { display: grid; gap: 1.2rem; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radius);
    padding: 1.4rem;
}

.step__badge {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ocre);
    border: var(--puntada);
    border-radius: 999px;
    padding: .2rem .8rem;
    margin-bottom: .8rem;
}

/* ---------- Tarjetas de taller ---------- */

.cards { display: grid; gap: 1.2rem; }
@media (min-width: 620px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgb(34 48 60 / .10);
}

.card__image {
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(140deg, color-mix(in srgb, var(--indigo) 22%, var(--papel)), color-mix(in srgb, var(--ocre) 22%, var(--papel)));
}

.card__body { padding: 1rem 1.1rem 1.2rem; }
.card__meta {
    margin: 0 0 .3rem;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ocre);
    font-weight: 700;
}
.card__title { margin-bottom: .2rem; }
.card__artisan { margin: 0; font-size: .92rem; color: color-mix(in srgb, var(--tinta) 65%, var(--papel)); }
.card__footer { margin: .7rem 0 0; border-top: var(--puntada); padding-top: .7rem; }
.card__footer span { color: color-mix(in srgb, var(--tinta) 60%, var(--papel)); }

/* ---------- Banda bonos regalo ---------- */

.gift-band { background: var(--ocre); color: var(--tinta); }
.gift-band__inner {
    display: flex; flex-direction: column; gap: 1.2rem;
    padding-block: 2.4rem;
}
.gift-band h2 { margin-bottom: .3rem; }
.gift-band p { margin: 0; }
@media (min-width: 720px) {
    .gift-band__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--tinta);
    color: color-mix(in srgb, var(--blanco) 80%, var(--tinta));
    margin-top: 2rem;
}
.site-footer a { color: inherit; text-decoration: none; display: block; margin-bottom: .45rem; }
.site-footer a:hover { color: var(--blanco); text-decoration: underline; }
.site-footer h3 {
    font-family: var(--f-body);
    font-size: .82rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ocre);
}
.site-footer .logo--footer { color: var(--blanco); }
.site-footer__tagline { max-width: 30ch; }
.site-footer__grid {
    display: grid; gap: 1.6rem;
    padding-block: 2.6rem 1.4rem;
}
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer__bottom {
    border-top: 1px solid color-mix(in srgb, var(--blanco) 14%, transparent);
    padding-block: 1.1rem;
    font-size: .88rem;
}

/* ---------- Banner cookies ---------- */

.cookie-banner {
    position: fixed;
    inset-inline: 1rem;
    bottom: 1rem;
    z-index: 90;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgb(34 48 60 / .18);
    padding: 1.1rem 1.3rem;
    max-width: 560px;
    margin-inline: auto;
}
.cookie-banner p { margin: 0 0 .9rem; font-size: .93rem; }
.cookie-banner__actions { display: flex; gap: .6rem; justify-content: flex-end; }

/* ---------- Errores ---------- */

.section--error { text-align: center; padding-block: 5rem; }
.error-code {
    font-family: var(--f-display);
    font-size: clamp(4rem, 14vw, 7rem);
    margin: 0;
    color: color-mix(in srgb, var(--indigo) 30%, var(--papel));
}

/* ============================================================
   Fase 2 · Formularios y tarjetas de autenticación
   ============================================================ */

.section--narrow { max-width: 560px; margin-inline: auto; }

.auth-card {
    background: var(--color-surface, #fff);
    border: 2px dashed var(--color-accent, #C08A2D); /* puntada de la casa */
    border-radius: var(--radius, 10px);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}
.auth-card--wide   { max-width: 720px; margin-inline: auto; }
.auth-card--center { text-align: center; }
.auth-card__icon   { font-size: 2.5rem; margin: 0 0 .5rem; }
.auth-card__title  { font-family: var(--font-display, "Young Serif", serif); font-size: 1.6rem; margin: 0 0 .5rem; color: var(--color-primary, #2E4A62); }
.auth-card__lead   { margin: 0 0 1.5rem; color: var(--color-text-soft, #5d5850); }
.auth-card__links  { margin: 1rem 0 0; font-size: .95rem; text-align: center; }
.auth-card__links--muted { color: var(--color-text-soft, #5d5850); }

.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__legend {
    font-family: var(--font-display, "Young Serif", serif);
    font-size: 1.05rem; color: var(--color-primary, #2E4A62);
    border-bottom: 2px dashed color-mix(in srgb, var(--color-accent, #C08A2D) 45%, transparent);
    padding-bottom: .35rem; margin: .75rem 0 0;
}

.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field__optional { font-weight: 400; color: var(--color-text-soft, #5d5850); font-size: .85em; }
.field input:not([type="checkbox"]),
.field select,
.field textarea {
    width: 100%;
    padding: .65rem .8rem;
    border: 1px solid #cfc8b8;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    color: inherit;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary, #2E4A62) 35%, transparent);
    outline-offset: 1px;
    border-color: var(--color-primary, #2E4A62);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field__help  { margin: 0; font-size: .85rem; color: var(--color-text-soft, #5d5850); }
.field__error { margin: 0; font-size: .85rem; color: #A4372E; font-weight: 600; }

.field--check label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .92rem; }
.field--check input { margin-top: .25rem; flex: none; width: 1.05rem; height: 1.05rem; }

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

/* Avisos en /cuenta */
.notice {
    border-radius: var(--radius, 10px);
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}
.notice p { margin: 0; }
.notice--warning { background: #FBF3DC; border-color: #E4CE8F; }
.notice--info    { background: #E8EEF4; border-color: #B9C9D8; }
.notice--success { background: #E7F1E7; border-color: #B4CFB4; }

.account-grid { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .account-grid { grid-template-columns: 1fr 1fr; } }
.card--flat { box-shadow: none; border: 1px solid #E5DFD0; }
.account-data { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: .75rem 0; }
.account-data dt { font-weight: 600; }
.account-data dd { margin: 0; }

/* Solicitud de artesano */
.apply-steps {
    margin: 0 0 1.5rem; padding-left: 1.3rem;
    display: grid; gap: .35rem; color: var(--color-text-soft, #5d5850);
}
.apply-account-note {
    background: #F1EDE2; border-radius: 8px; padding: .7rem 1rem; margin: 0;
    font-size: .95rem;
}
.apply-review-note { text-align: center; margin-top: .25rem; }

/* ============================================================
   Fase 3 · Catálogo público
   ============================================================ */

.section__lead { color: var(--color-text-soft, #5d5850); max-width: 60ch; margin-top: -0.5rem; }

/* --- Chips de categorías (portada) --- */
.cat-strip { display: flex; flex-wrap: wrap; gap: .6rem; }
.cat-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .95rem; border-radius: 999px;
    background: #fff; border: 1.5px dashed var(--color-accent, #C08A2D);
    color: var(--color-primary, #2E4A62); text-decoration: none; font-weight: 600;
}
.cat-chip:hover { background: var(--color-primary, #2E4A62); color: #fff; border-style: solid; }
.cat-chip__n { font-size: .8em; opacity: .7; font-weight: 400; }
.cat-chip--all { border-style: solid; }

/* --- Próximas fechas (portada) --- */
.upcoming { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.upcoming__item a {
    display: grid; gap: .15rem; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px);
    padding: .8rem 1.1rem;
}
.upcoming__item a:hover { border-color: var(--color-accent, #C08A2D); }
.upcoming__date { font-weight: 700; color: var(--color-primary, #2E4A62); }
.upcoming__title { font-family: var(--font-display, "Young Serif", serif); }
.upcoming__meta { font-size: .9rem; color: var(--color-text-soft, #5d5850); }
@media (min-width: 720px) {
    .upcoming__item a { grid-template-columns: 240px 1fr auto; align-items: center; }
}

/* --- Filtros del listado --- */
.filters {
    background: #fff; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px);
    padding: 1rem; margin-bottom: 1.5rem; display: grid; gap: .75rem;
}
.filters__row { display: flex; flex-wrap: wrap; gap: .75rem; }
.filters__field { display: grid; gap: .25rem; min-width: 140px; flex: 1; }
.filters__field--grow { flex: 2 1 220px; }
.filters__field label { font-size: .8rem; font-weight: 600; color: var(--color-text-soft, #5d5850); }
.filters__field input, .filters__field select {
    padding: .55rem .7rem; border: 1px solid #cfc8b8; border-radius: 8px;
    font: inherit; background: #fff; width: 100%;
}

.catalog__count { color: var(--color-text-soft, #5d5850); margin: 0 0 1rem; }
.catalog__empty {
    text-align: center; padding: 3rem 1rem; background: #fff;
    border: 2px dashed #E5DFD0; border-radius: var(--radius, 10px);
}
#catalogo-grid.is-loading { opacity: .45; transition: opacity .15s; pointer-events: none; }

/* --- Tarjetas de taller --- */
.cards--catalog { margin-bottom: 1.5rem; }
.card--workshop { padding: 0; overflow: hidden; }
.card__link { display: block; color: inherit; text-decoration: none; height: 100%; }
.card--workshop .card__image { height: 170px; }
.card--workshop .card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__image--ph {
    display: flex; align-items: center; justify-content: center;
    background:
        repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.28) 14px 16px),
        linear-gradient(135deg, var(--color-primary, #2E4A62), #4A6B85);
}
.card__image--ph span {
    color: #fff; font-family: var(--font-display, "Young Serif", serif);
    font-size: 1.15rem; letter-spacing: .04em; opacity: .95;
}
.card__image--ph[data-cat="floristería"] { background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.28) 14px 16px),
    linear-gradient(135deg, #6E4A62, #97688B); }
.card__image--ph[data-cat="costura"], .card__image--ph[data-cat="patronaje"] { background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.28) 14px 16px),
    linear-gradient(135deg, #C08A2D, #D8A954); }
.card__image--ph[data-cat="joyería"] { background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.28) 14px 16px),
    linear-gradient(135deg, #4A6252, #6E8A78); }
.card__image--ph[data-cat="cuero"] { background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.28) 14px 16px),
    linear-gradient(135deg, #6B4A2E, #8E6A48); }
.card__next { font-size: .85rem; color: var(--color-primary, #2E4A62); font-weight: 600; margin: .25rem 0 0; }

/* --- Paginación --- */
.pagination { display: flex; gap: .4rem; justify-content: center; margin: 1rem 0; }
.pagination__item {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.4rem; height: 2.4rem; padding: 0 .6rem;
    border: 1px solid #cfc8b8; border-radius: 8px; text-decoration: none; color: inherit;
    background: #fff;
}
.pagination__item.is-current { background: var(--color-primary, #2E4A62); color: #fff; border-color: var(--color-primary, #2E4A62); }

/* --- Ficha de taller --- */
.breadcrumbs { font-size: .9rem; color: var(--color-text-soft, #5d5850); margin-bottom: 1rem; }
.breadcrumbs a { color: inherit; }
.workshop__layout { display: grid; gap: 2rem; }
@media (min-width: 900px) { .workshop__layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.workshop__hero { height: 280px; border-radius: var(--radius, 10px); overflow: hidden; margin-bottom: 1.25rem; }
.workshop__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.workshop__hero span { font-size: 1.6rem; }
.workshop__title { font-family: var(--font-display, "Young Serif", serif); font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0 0 .35rem; color: var(--color-primary, #2E4A62); }
.workshop__byline { margin: 0 0 1rem; color: var(--color-text-soft, #5d5850); }
.workshop__rating { color: var(--color-accent, #C08A2D); font-weight: 700; }
.workshop__facts { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.workshop__facts li {
    background: #fff; border: 1px solid #E5DFD0; border-radius: 999px;
    padding: .3rem .8rem; font-size: .88rem;
}
.workshop__h2 { font-family: var(--font-display, "Young Serif", serif); font-size: 1.2rem; color: var(--color-primary, #2E4A62); margin: 1.75rem 0 .5rem; }
.workshop__description { line-height: 1.7; }
.workshop__address-note { display: block; font-size: .85rem; color: var(--color-text-soft, #5d5850); }
.workshop__map { height: 300px; border-radius: var(--radius, 10px); border: 1px solid #E5DFD0; margin-top: .75rem; z-index: 0; }
.workshop__related-title { margin-top: 2.5rem; }
.workshop__no-reviews { color: var(--color-text-soft, #5d5850); }

/* --- Panel lateral de reserva --- */
.booking-card, .artisan-mini {
    background: #fff; border: 2px dashed var(--color-accent, #C08A2D);
    border-radius: var(--radius, 10px); padding: 1.25rem; margin-bottom: 1.25rem;
}
.artisan-mini { border-style: solid; border-width: 1px; border-color: #E5DFD0; }
.booking-card__price { font-size: 1.35rem; margin: 0 0 .75rem; }
.booking-card__price span { font-size: .9rem; color: var(--color-text-soft, #5d5850); }
.booking-card__h2 { font-family: var(--font-display, "Young Serif", serif); font-size: 1.05rem; margin: 0 0 .6rem; color: var(--color-primary, #2E4A62); }
.booking-card__sessions { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.session { border: 1px solid #E5DFD0; border-radius: 8px; padding: .55rem .8rem; display: grid; gap: .1rem; }
.session--full { opacity: .55; }
.session__date { font-weight: 600; font-size: .95rem; }
.session__meta { font-size: .85rem; color: var(--color-text-soft, #5d5850); }
.booking-card__cta-note, .booking-card__empty { font-size: .85rem; color: var(--color-text-soft, #5d5850); margin: 0; }
.artisan-mini__name { font-weight: 700; margin: 0 0 .35rem; }
.artisan-mini__bio { font-size: .92rem; color: var(--color-text-soft, #5d5850); }

/* --- Reseñas --- */
.reviews { display: grid; gap: 1rem; }
.review { background: #fff; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px); padding: 1rem 1.2rem; }
.review__head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.review__stars { color: var(--color-accent, #C08A2D); letter-spacing: .1em; }
.review__title { font-weight: 700; margin: 0 0 .35rem; }
.review__reply { background: #F7F4ED; border-radius: 8px; padding: .6rem .8rem; font-size: .92rem; margin: .6rem 0 0; }

/* --- Perfil de artesano --- */
.artisan-hero { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.25rem; }
.artisan-hero__badge {
    flex: none; width: 84px; height: 84px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary, #2E4A62); color: #fff;
    font-family: var(--font-display, "Young Serif", serif); font-size: 2.2rem;
    border: 3px dashed var(--color-accent, #C08A2D);
}
.artisan-hero__name { font-family: var(--font-display, "Young Serif", serif); margin: 0 0 .25rem; color: var(--color-primary, #2E4A62); }
.artisan-hero__meta, .artisan-hero__social { margin: 0; color: var(--color-text-soft, #5d5850); }
.artisan-bio { max-width: 70ch; line-height: 1.7; margin-bottom: 2rem; }

/* ============================================================
   Fase 4 · Panel del artesano
   ============================================================ */

.panel { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .panel { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }

.panel-nav {
    background: #fff; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px);
    padding: 1rem; position: sticky; top: 1rem;
}
.panel-nav__workshop { font-family: var(--font-display, "Young Serif", serif); color: var(--color-primary, #2E4A62); margin: 0 0 .75rem; font-size: 1.05rem; }
.panel-nav nav { display: grid; gap: .15rem; margin-bottom: .9rem; }
.panel-nav nav a {
    padding: .5rem .7rem; border-radius: 8px; text-decoration: none; color: inherit;
}
.panel-nav nav a:hover { background: #F7F4ED; }
.panel-nav nav a.is-active { background: var(--color-primary, #2E4A62); color: #fff; }
.panel-nav__public { font-size: .85rem; }

.panel__main { min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.panel-actions { display: flex; gap: .75rem; margin: 1.25rem 0; flex-wrap: wrap; }
.panel-empty, .panel-note { color: var(--color-text-soft, #5d5850); font-size: .95rem; }
.panel-note { margin-top: 1.25rem; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 1rem 0; }
@media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
    background: #fff; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px);
    padding: 1rem; display: grid; gap: .15rem; text-align: center;
}
.stat__n { font-family: var(--font-display, "Young Serif", serif); font-size: 1.6rem; color: var(--color-primary, #2E4A62); }
.stat__l { font-size: .82rem; color: var(--color-text-soft, #5d5850); }

/* --- Tablas del panel --- */
.table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px); overflow: hidden; }
.table th, .table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid #EFEAE0; vertical-align: middle; }
.table th { background: #F7F4ED; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-soft, #5d5850); }
.table tr:last-child td { border-bottom: 0; }
.table .is-muted { opacity: .55; }
.table__minor { font-size: .82rem; color: var(--color-text-soft, #5d5850); }
.table__actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.table__actions form { display: inline; }
@media (max-width: 719px) {
    .table--workshops thead { display: none; }
    .table--workshops tr { display: grid; gap: .25rem; padding: .75rem; }
    .table--workshops td { border: 0; padding: 0; }
}

.badge { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.badge--published, .badge--open      { background: #E7F1E7; color: #2F5D3A; }
.badge--draft                        { background: #EFEAE0; color: #6B6455; }
.badge--paused, .badge--full         { background: #FBF3DC; color: #7A5E1E; }
.badge--cancelled                    { background: #F6E4E2; color: #8C3A32; }
.badge--completed                    { background: #E8EEF4; color: #2E4A62; }

.btn--small { padding: .3rem .7rem; font-size: .82rem; }
.btn--danger { background: #fff; border: 1px solid #C96D64; color: #8C3A32; }
.btn--danger:hover { background: #8C3A32; color: #fff; border-color: #8C3A32; }

/* --- Asistente por pasos --- */
.wizard { list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0 0 1.25rem; flex-wrap: wrap; }
.wizard button {
    background: #fff; border: 1px solid #cfc8b8; border-radius: 999px;
    padding: .45rem 1rem; font: inherit; font-size: .88rem; cursor: pointer;
}
.wizard button.is-active { background: var(--color-primary, #2E4A62); color: #fff; border-color: var(--color-primary, #2E4A62); }
.wizard__step { display: none; border: 0; padding: 0; margin: 0; }
.wizard__step.is-active { display: grid; gap: 1rem; }
.wizard__controls { display: flex; gap: .75rem; margin-top: 1.25rem; }
.form--panel { background: #fff; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px); padding: 1.5rem; }

.form__row--4 { display: grid; gap: .75rem; }
@media (min-width: 800px) { .form__row--4 { grid-template-columns: repeat(4, 1fr); } }

/* --- Imágenes del taller --- */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.img-grid__item { display: grid; gap: .35rem; font-size: .85rem; }
.img-grid__item img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid #E5DFD0; }

/* --- Fechas --- */
.session-form-card { background: #fff; border: 2px dashed var(--color-accent, #C08A2D); border-radius: var(--radius, 10px); padding: 1.25rem; margin: 1rem 0 1.5rem; }
.inline-form { display: inline-flex; gap: .3rem; align-items: center; }
.inline-form__n { width: 4.2rem; padding: .3rem .4rem; border: 1px solid #cfc8b8; border-radius: 6px; }

/* --- Calendario --- */
.cal-nav { display: flex; gap: .4rem; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: #E5DFD0; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px); overflow: hidden; }
.calendar__head { background: #F7F4ED; padding: .4rem; text-align: center; font-size: .78rem; font-weight: 700; color: var(--color-text-soft, #5d5850); }
.calendar__cell { background: #fff; min-height: 86px; padding: .3rem; display: grid; gap: .2rem; align-content: start; }
.calendar__cell--empty { background: #FBF9F3; }
.calendar__cell.is-today { outline: 2px solid var(--color-accent, #C08A2D); outline-offset: -2px; }
.calendar__day { font-size: .78rem; color: var(--color-text-soft, #5d5850); }
.calendar__event {
    display: block; font-size: .7rem; line-height: 1.25; padding: .18rem .3rem;
    border-radius: 5px; text-decoration: none; color: #2F5D3A; background: #E7F1E7;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.calendar__event--full { background: #FBF3DC; color: #7A5E1E; }
.calendar__event--cancelled { background: #EFEAE0; color: #6B6455; text-decoration: line-through; }
@media (max-width: 719px) { .calendar__cell { min-height: 60px; } .calendar__event { font-size: .62rem; } }

/* ============================================================
   Fase 5 · Reserva y pago
   ============================================================ */

.session { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.session__info { display: grid; gap: .1rem; }
.session__book { display: inline-flex; gap: .4rem; align-items: center; }
.session__book select { padding: .35rem .5rem; border: 1px solid #cfc8b8; border-radius: 6px; background: #fff; }

.checkout__timer {
    background: #FBF3DC; border: 1px solid #E8D9A8; color: #7A5E1E;
    border-radius: var(--radius, 10px); padding: .7rem 1rem; text-align: center;
    margin-bottom: 1.25rem; font-size: .95rem;
}
.checkout__timer--urgent { background: #F6E4E2; border-color: #E4B7B2; color: #8C3A32; }
.checkout__timer strong { font-variant-numeric: tabular-nums; }

.checkout__grid { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .checkout__grid { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.checkout__summary, .checkout__payment {
    background: #fff; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px); padding: 1.5rem;
}
.checkout__artisan { color: var(--color-text-soft, #5d5850); margin-top: -.5rem; }
.checkout__lines { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .45rem; }
.checkout__lines li { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.checkout__lines li span { color: var(--color-text-soft, #5d5850); }
.checkout__discount strong { color: #2F5D3A; }
.checkout__total { border-top: 1px solid #EFEAE0; padding-top: .6rem; font-size: 1.05rem; }
.checkout__coupon { display: flex; gap: .5rem; margin-top: 1rem; }
.checkout__coupon input { flex: 1; padding: .5rem .7rem; border: 1px solid #cfc8b8; border-radius: 8px; text-transform: uppercase; }
.checkout__cancel { margin-top: 1rem; }
.checkout__simnote {
    background: #FBF3DC; border: 1px dashed #C08A2D; border-radius: 8px;
    padding: .8rem 1rem; font-size: .9rem; margin-bottom: 1rem;
}
.checkout__secure, .checkout__terms { font-size: .82rem; color: var(--color-text-soft, #5d5850); margin-top: .8rem; }
.checkout__loading { color: var(--color-text-soft, #5d5850); font-size: .9rem; }
.btn--block { display: block; width: 100%; text-align: center; }
#payment-element { min-height: 40px; margin-bottom: 1rem; }

.booking-summary { max-width: 420px; margin: 1.25rem auto; text-align: left; }
.booking-summary__code { font-size: 1.15rem; letter-spacing: .08em; }
.booking-summary__hint { color: var(--color-text-soft, #5d5850); font-size: .92rem; }

/* ============================================================
   Fase 6 · Área de usuario, favoritos, reseñas y mensajes
   ============================================================ */

.card { position: relative; }
.fav { position: absolute; top: .6rem; right: .6rem; z-index: 2; }
.fav__btn {
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    border: 1px solid #E5DFD0; background: rgba(255,255,255,.92);
    font-size: 1.15rem; line-height: 1; cursor: pointer; color: #8C3A32;
    display: grid; place-items: center; transition: transform .12s ease;
}
.fav__btn:hover { transform: scale(1.12); }
.fav__btn.is-on { background: #8C3A32; border-color: #8C3A32; color: #fff; }

.form-block { margin-bottom: 1.5rem; }
.danger-zone { border-color: #E4B7B2; }

.rating-field legend { font-weight: 600; margin-bottom: .35rem; }
.rating-input { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.rating-input input { position: absolute; opacity: 0; pointer-events: none; }
.rating-input label { font-size: 1.9rem; color: #D8D2C2; cursor: pointer; transition: color .1s ease; }
.rating-input label:hover,
.rating-input label:hover ~ label,
.rating-input input:checked ~ label { color: var(--color-accent, #C08A2D); }
.rating-input input:focus-visible + label { outline: 2px solid var(--color-primary, #2E4A62); border-radius: 4px; }

.thread-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.thread-list__item a {
    display: grid; gap: .15rem; padding: .9rem 1rem; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px);
}
.thread-list__item.is-unread a { border-left: 4px solid var(--color-accent, #C08A2D); }
.thread-list__item a:hover { border-color: var(--color-primary, #2E4A62); }
.thread-list__who { font-weight: 700; display: flex; gap: .5rem; align-items: center; }
.thread-list__preview { color: var(--color-text-soft, #5d5850); font-size: .92rem; }

.chat { display: grid; gap: .6rem; margin: 1rem 0 1.25rem; }
.chat__msg {
    max-width: 78%; background: #fff; border: 1px solid #E5DFD0;
    border-radius: 12px 12px 12px 4px; padding: .7rem .9rem; justify-self: start;
}
.chat__msg--mine {
    background: #E8EEF4; border-color: #CBD9E5;
    border-radius: 12px 12px 4px 12px; justify-self: end;
}
.chat__body { margin: 0; white-space: pre-wrap; }
.chat__meta { margin: .3rem 0 0; font-size: .75rem; color: var(--color-text-soft, #5d5850); }
.chat__form { display: grid; gap: .6rem; }
.chat__form textarea { padding: .7rem .9rem; border: 1px solid #cfc8b8; border-radius: 10px; resize: vertical; }
.chat__form .btn { justify-self: end; }

.ask-artisan { background: #fff; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px); padding: 1.25rem; margin-bottom: 1.25rem; }
.ask-artisan__form { display: grid; gap: .6rem; }
.ask-artisan__form textarea { padding: .6rem .8rem; border: 1px solid #cfc8b8; border-radius: 8px; resize: vertical; }
.ask-artisan__form .btn { justify-self: start; }
.ask-artisan__login { color: var(--color-text-soft, #5d5850); font-size: .92rem; margin: 0; }

.catalog__grid--account { margin-top: .5rem; }

/* ============================================================
   Fase 7 · Bonos regalo
   ============================================================ */
.voucher-amounts { display: flex; gap: .6rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.voucher-amounts__opt {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1.5px solid #cfc8b8; border-radius: 999px; padding: .5rem 1.1rem;
    cursor: pointer; background: #fff; font-weight: 700;
}
.voucher-amounts__opt:has(input:checked) { border-color: var(--color-accent, #C08A2D); background: #FBF3DC; }
.voucher-amounts__opt input[type="radio"] { accent-color: var(--color-accent, #C08A2D); }
.voucher-amounts__opt--free input[type="number"] { width: 5rem; border: 1px solid #cfc8b8; border-radius: 6px; padding: .25rem .4rem; font-weight: 400; }
.voucher-check { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #E5DFD0; }
.voucher-check .checkout__coupon { max-width: 420px; }
.voucher-code { display: inline-block; background: #fff; border: 2px dashed var(--color-accent, #C08A2D); border-radius: 10px; padding: .6rem 1.2rem; margin: .5rem 0 1rem; }
.checkout__simnote--voucher { background: #E7F1E7; border-color: #2F5D3A; color: #2F5D3A; }

/* ============================================================
   Fase 8 · Administración
   ============================================================ */
.panel-nav--admin .panel-nav__workshop { color: #8C3A32; }
.stat-grid--admin { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stat-grid--admin { grid-template-columns: repeat(3, 1fr); } }
.stat--alert { border-color: #C08A2D; background: #FBF3DC; }
.chart-box { background: #fff; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px); padding: 1rem; margin-bottom: 1.5rem; }
.admin-filter { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.admin-filter input[type="search"], .admin-filter select { padding: .5rem .7rem; border: 1px solid #cfc8b8; border-radius: 8px; }
.admin-filter input[type="search"] { flex: 1; min-width: 200px; }
.review-card { background: #fff; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px); padding: 1rem 1.25rem; margin-bottom: .75rem; }
.review-card.is-muted { opacity: .6; }
.admin-pending { display: grid; gap: .75rem; }
@media (min-width: 860px) { .admin-pending { grid-template-columns: 1fr auto; align-items: start; } }
.admin-pending__actions { display: grid; gap: .5rem; justify-items: stretch; }
.admin-pending__actions form { display: flex; gap: .4rem; }
.inline-form__reason { padding: .35rem .5rem; border: 1px solid #cfc8b8; border-radius: 6px; font-size: .85rem; width: 220px; }
.code-area { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85rem; }

.impersonate-banner {
    position: sticky; top: 0; z-index: 60;
    background: #8C3A32; color: #fff;
    display: flex; gap: 1rem; align-items: center; justify-content: center;
    padding: .5rem 1rem; font-size: .9rem; flex-wrap: wrap;
}
.btn--light { background: #fff; color: #8C3A32; border: 0; }

.page-content__body { background: #fff; border: 1px solid #E5DFD0; border-radius: var(--radius, 10px); padding: 1.75rem; line-height: 1.7; }
.page-content__body h2 { font-family: var(--font-display, "Young Serif", serif); color: var(--color-primary, #2E4A62); margin: 1.2em 0 .4em; }
.page-content__body ul { padding-left: 1.4rem; }

/* ============================================================
   Fase 9 · Marca Artisapp
   ============================================================ */
.logo { display: inline-flex; align-items: center; gap: .5rem; }
.logo__mark { flex-shrink: 0; border-radius: 50%; }

/* ============================================================
   Mejoras · Portada "banco de trabajo"
   ============================================================ */

/* ---- Hero ---- */
.hero2 {
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(192,138,45,.10), transparent 60%),
        var(--color-bg, #F7F4ED);
    border-bottom: 1px solid #E5DFD0;
    overflow: hidden;
}
.hero2__inner {
    display: grid; gap: 2.5rem; align-items: center;
    padding: 3.2rem 0 3.6rem;
}
@media (min-width: 940px) {
    .hero2__inner { grid-template-columns: 1.15fr .85fr; padding: 4.5rem 0 5rem; }
}
.hero2__eyebrow {
    font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--color-accent, #C08A2D); font-weight: 700; margin: 0 0 1rem;
}
.hero2__title {
    font-family: var(--f-display); font-weight: 400;
    font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.14;
    color: var(--color-primary, #2E4A62); margin: 0 0 1.6rem;
}

/* Palabra rotativa con subrayado dibujado a mano */
.rotator { position: relative; display: inline-block; color: #1E2A33; min-width: 9ch; }
.rotator__word {
    display: inline-block; opacity: 0; position: absolute; left: 0; top: 0;
    white-space: nowrap;
    transform: translateY(.35em);
    transition: opacity .45s ease, transform .45s ease;
}
.rotator__word.is-active { position: relative; opacity: 1; transform: none; }
.rotator__stroke {
    position: absolute; left: -2%; bottom: -.18em; width: 104%; height: .34em;
    color: var(--color-accent, #C08A2D); overflow: visible;
}
.rotator__stroke path {
    stroke-dasharray: 100; stroke-dashoffset: 0;
}
.rotator.is-drawing .rotator__stroke path {
    animation: draw-stroke .7s ease-out .15s both;
}
@keyframes draw-stroke { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.hero2__search {
    display: grid; gap: .55rem; grid-template-columns: 1fr;
    background: #fff; border: 1.5px solid #E0D8C6; border-radius: 16px;
    padding: .6rem; box-shadow: 0 10px 30px rgba(46,74,98,.07);
    max-width: 560px;
}
@media (min-width: 640px) { .hero2__search { grid-template-columns: 1.2fr 1fr auto; } }
.hero2__search input {
    border: 0; background: transparent; padding: .7rem .8rem; font-size: 1rem; min-width: 0;
}
.hero2__search input:focus { outline: 2px solid var(--color-accent, #C08A2D); border-radius: 10px; }
.hero2__trust { margin: .9rem 0 0; font-size: .88rem; color: #6B6455; }

/* Collage de polaroids */
.hero2__collage { position: relative; height: 340px; }
@media (max-width: 939px) { .hero2__collage { height: 300px; max-width: 460px; margin-inline: auto; width: 100%; } }
.polaroid {
    position: absolute; width: 200px; background: #fff; padding: 10px 10px 12px;
    box-shadow: 0 14px 34px rgba(30,42,51,.16);
    text-decoration: none; color: inherit;
    transition: transform .35s ease, box-shadow .35s ease;
}
.polaroid img, .polaroid__tile {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 140px; object-fit: cover;
}
.polaroid__tile {
    font-family: var(--f-display); font-size: 3.2rem; color: #fff;
}
.polaroid__tile--1 { background: #2E4A62; }
.polaroid__tile--2 { background: #C08A2D; }
.polaroid__tile--3 { background: #7A8B6F; }
.polaroid__caption { display: block; margin-top: .55rem; font-size: .78rem; color: #6B6455; text-align: center; }
.polaroid--1 { left: 2%;  top: 6%;  transform: rotate(-5deg); z-index: 1; }
.polaroid--2 { left: 34%; top: 26%; transform: rotate(3deg);  z-index: 3; }
.polaroid--3 { left: 62%; top: 2%;  transform: rotate(-2deg); z-index: 2; }
@media (max-width: 480px) { .polaroid { width: 160px; } .polaroid img, .polaroid__tile { height: 110px; } .polaroid--3 { left: 52%; } }
.polaroid:hover { transform: rotate(0deg) translateY(-6px); z-index: 5; box-shadow: 0 22px 44px rgba(30,42,51,.22); }
.polaroid__tape {
    position: absolute; top: -12px; left: 50%; width: 76px; height: 24px;
    transform: translateX(-50%) rotate(var(--rot, 0deg));
    background: rgba(192,138,45,.35); backdrop-filter: blur(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,.08); z-index: 4;
}

/* ---- Guirnalda de oficios (marquee) ---- */
.crafts-garland {
    background: var(--color-primary, #2E4A62);
    overflow: hidden; padding: .8rem 0; white-space: nowrap;
}
.crafts-garland__track { display: inline-flex; align-items: center; gap: 1.6rem; animation: garland 28s linear infinite; will-change: transform; }
.crafts-garland:hover .crafts-garland__track { animation-play-state: paused; }
@keyframes garland { to { transform: translateX(-50%); } }
.crafts-garland__item {
    color: #F7F4ED; text-decoration: none; font-family: var(--f-display); font-size: 1.05rem;
}
.crafts-garland__item:hover { color: #E9C98A; }
.crafts-garland__n {
    font-family: var(--f-body); font-size: .72rem; vertical-align: super;
    color: #E9C98A; margin-left: .25rem;
}
.crafts-garland__dot { color: rgba(233,201,138,.7); font-size: .8rem; }

/* ---- Cabeceras de sección ---- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head__more { font-size: .92rem; font-weight: 700; color: var(--color-accent, #C08A2D); text-decoration: none; white-space: nowrap; }
.section-head__more:hover { text-decoration: underline; }

/* ---- Tickets de próximas fechas ---- */
.tickets {
    display: flex; gap: 1rem; overflow-x: auto; padding: .6rem .2rem 1rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.tickets:focus-visible { outline: 2px solid var(--color-accent, #C08A2D); border-radius: 8px; }
.ticket {
    scroll-snap-align: start; flex: 0 0 232px;
    background: #fff; text-decoration: none; color: inherit;
    border: 1.5px solid #E0D8C6; border-radius: 12px; padding: .9rem 1rem;
    position: relative;
    background-image: radial-gradient(circle at 0 50%, var(--color-bg, #F7F4ED) 9px, transparent 9.5px),
                      radial-gradient(circle at 100% 50%, var(--color-bg, #F7F4ED) 9px, transparent 9.5px);
    transition: transform .25s ease, box-shadow .25s ease;
}
.ticket:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(46,74,98,.12); }
.ticket__date { display: block; font-size: .82rem; color: #6B6455; margin-bottom: .35rem; }
.ticket__date strong { font-family: var(--f-display); font-size: 1.5rem; color: var(--color-primary, #2E4A62); margin-right: .15rem; }
.ticket__title { display: block; font-weight: 700; line-height: 1.3; margin-bottom: .3rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.ticket__meta { display: block; font-size: .84rem; color: #6B6455; margin-bottom: .5rem; }
.ticket__seats {
    display: inline-block; font-size: .78rem; font-weight: 700;
    background: #EDF3ED; color: #2F5D3A; border-radius: 999px; padding: .18rem .65rem;
}
.ticket__seats.is-low { background: #FBEDE8; color: #8C3A32; }

/* ---- Destacados escalonados ---- */
@media (min-width: 900px) {
    .cards--stagger > .card:nth-child(3n+2) { transform: translateY(1.4rem); }
    .cards--stagger > .card:nth-child(3n)   { transform: translateY(.5rem); }
    .cards--stagger > .card { transition: transform .3s ease, box-shadow .3s ease; }
    .cards--stagger > .card:hover { transform: translateY(-4px); }
}

/* ---- Camino cosido ---- */
.stitched { position: relative; display: grid; gap: 1.6rem; margin-top: 2.2rem; }
@media (min-width: 820px) { .stitched { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; padding-top: 2.4rem; } }
.stitched__thread { display: none; color: var(--color-accent, #C08A2D); }
@media (min-width: 820px) {
    .stitched__thread { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 54px; }
}
.stitched__step h3 { font-family: var(--f-display); font-weight: 400; color: var(--color-primary, #2E4A62); font-size: 1.25rem; margin: 0 0 .5rem; }
.stitched__step p { margin: 0; color: #4A453C; line-height: 1.65; }

/* ---- Banda de bono regalo ---- */
.giftband { background: var(--color-primary, #2E4A62); color: #F7F4ED; padding: 3.2rem 0; }
.giftband__inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 820px) { .giftband__inner { grid-template-columns: auto 1fr; gap: 3rem; } }
.giftband__ticket {
    justify-self: center;
    border: 2px dashed #E9C98A; border-radius: 14px; padding: 1.4rem 2rem;
    text-align: center; transform: rotate(-3deg); background: rgba(255,255,255,.04);
}
.giftband__amount { display: block; font-family: var(--f-display); font-size: 2.6rem; color: #E9C98A; }
.giftband__code { display: block; font-size: .85rem; letter-spacing: .2em; color: rgba(247,244,237,.75); margin-top: .3rem; }
.giftband__copy h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .7rem; color: #fff; }
.giftband__copy p { margin: 0 0 1.2rem; max-width: 54ch; color: rgba(247,244,237,.88); line-height: 1.65; }
.btn--gold { background: var(--color-accent, #C08A2D); color: #fff; border: 0; }
.btn--gold:hover { background: #A9791F; }

/* ---- Manifiesto ---- */
.manifesto { text-align: center; padding-top: 3.4rem; padding-bottom: 3.6rem; }
.manifesto__text {
    font-family: var(--f-display); font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    color: var(--color-primary, #2E4A62); line-height: 1.35; margin: 0 0 1rem;
}
.manifesto__text em { font-style: italic; color: var(--color-accent, #C08A2D); }
.manifesto__sign { color: #6B6455; margin: 0 0 1.6rem; font-size: .95rem; }

/* ---- Revelado al hacer scroll ---- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- Movimiento reducido: todo quieto ---- */
@media (prefers-reduced-motion: reduce) {
    .crafts-garland__track { animation: none; }
    .rotator__word { transition: none; }
    .rotator.is-drawing .rotator__stroke path { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .ticket, .polaroid, .cards--stagger > .card { transition: none; }
}

/* Admin · categorías */
.cat-rename { display: inline-flex; gap: .4rem; align-items: center; }
.cat-rename input { padding: .35rem .5rem; border: 1px solid #cfc8b8; border-radius: 6px; font-size: .85rem; width: 160px; }
.cat-sub { color: #C08A2D; }

/* ============================================================
   Arreglo · formularios con radios (bonos regalo) y [hidden]
   ============================================================ */
/* El atributo hidden SIEMPRE gana, aunque el elemento tenga display propio */
[hidden] { display: none !important; }

/* Radios y checkboxes dentro de .field--check: tamaño natural, sin
   heredar el ancho/padding/borde de los campos de texto.
   (La regla genérica .field input:not([type=checkbox]) tiene más
   especificidad, así que aquí igualamos con el selector de atributo.) */
.field--check input[type="radio"],
.field--check input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    border: 0;
    background: none;
    flex: none;
    margin-top: .15rem;
    accent-color: var(--color-accent, #C08A2D);
    cursor: pointer;
}
.field--check { display: block; margin: .9rem 0 .5rem; }
.field--check label {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary, #2E4A62);
    cursor: pointer;
}
.field--check label span { font-weight: 600; }

/* El input de importe libre tampoco debe estirarse */
.voucher-amounts__opt--free input[type="number"] { width: 5rem; flex: none; }

/* Privacidad · mensajería */
.msg-trust { font-size: .85rem; color: #6B6455; background: #FBF3DC; border: 1px solid #EAD9AE; border-radius: 8px; padding: .55rem .8rem; margin: .8rem 0 .5rem; }

/* Perfil del obrador: portada y galería */
.artisan-cover { border-radius: var(--radius, 10px); overflow: hidden; margin-bottom: 1.4rem; max-height: 320px; }
.artisan-cover img { width: 100%; height: 320px; object-fit: cover; display: block; }
.artisan-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: 1.6rem 0 2.2rem; }
@media (min-width: 760px) { .artisan-gallery { grid-template-columns: repeat(4, 1fr); } }
.artisan-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; }

/* Ficha del taller: miniaturas de la galería */
.workshop__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .6rem; }
.workshop__thumbs img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 8px; display: block; }

/* Selector de idioma */
.lang-switch { display: inline-flex; gap: .15rem; align-items: center; font-size: .78rem; }
.lang-switch a { color: #6B6455; text-decoration: none; padding: .2rem .35rem; border-radius: 6px; font-weight: 700; }
.lang-switch a:hover { background: #EFE9DA; }
.lang-switch a.is-active { color: var(--color-primary, #2E4A62); background: #EFE9DA; }

/* Nota de idioma del contenido del artesano */
.workshop__langnote { font-size: .82rem; color: #6B6455; font-style: italic; margin: -.3rem 0 .8rem; }

/* Selector de idioma del panel de textos */
.lang-switch--admin { margin: 0 0 1.2rem; font-size: .9rem; }

/* Selector de idioma: desplegable compacto (v2) */
.lang-switch { display: inline-flex; align-items: center; gap: .3rem; }
.lang-switch__icon { font-size: .95rem; line-height: 1; }
.lang-switch select {
    appearance: none; -webkit-appearance: none;
    border: 1px solid #E0D8C6; border-radius: 8px; background: #fff;
    font: inherit; font-size: .8rem; font-weight: 700; color: var(--color-primary, #2E4A62);
    padding: .25rem 1.2rem .25rem .5rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0l4 6 4-6z' fill='%232E4A62'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .45rem center;
}
.lang-switch select:focus-visible { outline: 2px solid var(--color-accent, #C08A2D); }