/* ================================================================
   TATTOOSHOP.ES — Sistema de diseño "Ink Spain 2026"
   CSS propio, sin Tailwind ni frameworks externos.
   Traduce los tokens de SISTEMA-DISENO.md a variables CSS nativas.
   ================================================================ */

/* ── Tokens de diseño ─────────────────────────────────────── */
:root {
    /* Capas de superficie */
    --negro-tinta:       #080909;
    --negro-puro:        #040505;
    --carbon:            #1A1C1C;
    --carbon-medio:      #1E2020;
    --carbon-alto:       #282A2B;
    --carbon-max:        #333535;

    /* Texto */
    --hueso:             #E2E2E2;
    --gris-meta:         #9CA08C;
    --gris-outline:      #8E9379;

    /* Acentos — dos colores, dos funciones */
    --rojo-accion:       #D70000;   /* botones de acción, CTAs */
    --verde-marca:       #FFE730;   /* SOLO marca (logo) + acciones de conversión (CTAs) + PRO. Usar con escasez */
    --verde-texto:       #171E00;   /* texto oscuro sobre fondo amarillo */
    --verde-agenda:      #3FB950;   /* verde semántico: agenda abierta / disponible */

    /* Bordes translúcidos */
    --border-5:          rgba(255,255,255,0.05);
    --border-10:         rgba(255,255,255,0.10);
    --border-20:         rgba(255,255,255,0.20);

    /* Tipografía */
    --f-display:         'Syne', system-ui, sans-serif;
    --f-body:            'Geist', system-ui, sans-serif;

    /* Escala de tipo (SISTEMA-DISENO.md) */
    --t-display-size:    clamp(40px, 7vw, 80px);
    --t-display-lh:      1.1;
    --t-display-ls:      -0.04em;
    --t-headline-lg:     clamp(32px, 4vw, 48px);
    --t-headline-lg-lh:  1.1;
    --t-headline-lg-ls:  -0.02em;
    --t-headline-md:     24px;
    --t-headline-md-lh:  32px;
    --t-body-lg:         18px;
    --t-body-lg-lh:      28px;
    --t-body-md:         16px;
    --t-body-md-lh:      24px;
    --t-label:           12px;
    --t-label-lh:        16px;
    --t-label-ls:        0.1em;

    /* Espaciado */
    --max-w:             1440px;
    --margin-desk:       64px;
    --margin-mob:        20px;
    --stack-sm:          12px;
    --stack-md:          32px;
    --stack-lg:          80px;
    --gutter:            24px;

    /* Animaciones */
    --ease:              cubic-bezier(0.16, 1, 0.3, 1);
    --dur:               0.3s;

    /* Radios — de pequeño a píldora */
    --radius-sm:         6px;
    --radius-md:         12px;
    --radius-lg:         18px;
    --radius-pill:       999px;

    /* Sombras de elevación — apiladas para efecto 3D real */
    --shadow-sm:         0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.7);
    --shadow-md:         0 8px 24px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.7);
    --shadow-lg:         0 20px 60px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.6);
    --shadow-accent:     0 8px 32px rgba(255,231,48,0.14), 0 2px 8px rgba(0,0,0,0.6);
    --shadow-rojo:       0 8px 32px rgba(215,0,0,0.25), 0 2px 8px rgba(0,0,0,0.6);

    /* Glass — fondo y borde para superficies translúcidas */
    --glass-bg:          rgba(255,255,255,0.04);
    --glass-border:      rgba(255,255,255,0.09);
    --glass-bg-hover:    rgba(255,255,255,0.07);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    background-color: var(--negro-tinta);
}

body {
    font-family: var(--f-body);
    font-size: var(--t-body-md);
    line-height: var(--t-body-md-lh);
    background-color: var(--negro-tinta);
    color: var(--hueso);
    min-height: 100vh;
    /* Evita el scroll horizontal SIN romper position:sticky. `overflow:hidden`
       en el body crea un scroll container que descongela el sticky del
       filter-bar; `overflow:clip` recorta igual pero NO crea scroll container. */
    overflow-x: hidden;   /* fallback navegadores viejos */
    overflow-x: clip;     /* moderno: mantiene el sticky del filter-bar */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selección de texto con verde de marca */
::selection { background-color: var(--verde-marca); color: var(--verde-texto); }

a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
/* Los tiles e iconos de Leaflet son <img> que NO deben heredar el max-width:100%
   global (los aplastaría y el mapa saldría negro). Los devolvemos a su tamaño real. */
.leaflet-container img { max-width: none !important; }
/* Aísla el stacking context del mapa: sus paneles/controles internos usan
   z-index hasta 1000 y, sin aislar, se dibujan por encima del header (z-50) y
   del filter-bar sticky (z-35) al hacer scroll en móvil. */
.leaflet-container { isolation: isolate; position: relative; z-index: 0; }

/* Foco de teclado en verde de marca */
:focus-visible {
    outline: 2px solid var(--verde-marca);
    outline-offset: 3px;
}

/* ── Clases tipográficas ───────────────────────────────────── */

.t-display-xl {
    font-family: var(--f-display);
    font-size: var(--t-display-size);
    line-height: var(--t-display-lh);
    letter-spacing: var(--t-display-ls);
    font-weight: 800;
    text-transform: uppercase;
}

.t-headline-lg {
    font-family: var(--f-display);
    font-size: var(--t-headline-lg);
    line-height: var(--t-headline-lg-lh);
    letter-spacing: var(--t-headline-lg-ls);
    font-weight: 700;
    text-transform: uppercase;
}

.t-headline-md {
    font-family: var(--f-display);
    font-size: var(--t-headline-md);
    line-height: var(--t-headline-md-lh);
    font-weight: 600;
    text-transform: uppercase;
}

.t-body-lg {
    font-size: var(--t-body-lg);
    line-height: var(--t-body-lg-lh);
}

.t-label-caps {
    font-family: var(--f-body);
    font-size: var(--t-label);
    line-height: var(--t-label-lh);
    letter-spacing: var(--t-label-ls);
    font-weight: 600;
    text-transform: uppercase;
}

/* ── Layout ────────────────────────────────────────────────── */

.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--margin-desk);
}

/* Compensar el nav fijo */
.main-content { padding-top: 72px; }

/* ── Textura artística — micro-puntos de puntillismo (estilo stippling de tatuaje) ── */
/* Rejilla de puntos equidistantes: precisa, elegante, sin la tensión del ruido aleatorio */

.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.09;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='0.65' fill='white'/%3E%3C/svg%3E");
    background-size: 22px 22px;
}

/* ── Barra de navegación ───────────────────────────────────── */

.site-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
    background: rgba(8,9,9,0.55);
    backdrop-filter: blur(32px) saturate(200%) brightness(0.9);
    -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(0.9);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), var(--shadow-sm);
    transition: border-color var(--dur), box-shadow var(--dur);
}

.site-nav.scrolled {
    border-bottom-color: rgba(255,231,48,0.18);
    box-shadow: 0 1px 0 rgba(255,231,48,0.08), var(--shadow-md);
}

.site-nav__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--margin-desk);
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
}

/* Logo — verde de marca */
.site-nav__logo {
    display: inline-block;
    white-space: nowrap;
    transition: opacity var(--dur);
}
.site-nav__logo img { display: block; height: 36px; width: auto; }
.site-nav__logo:hover { opacity: 0.8; }

.site-nav__links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.site-nav__links a {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--hueso);
    opacity: 0.65;
    padding-bottom: 2px;
    transition: opacity var(--dur), border-color var(--dur);
    border-bottom: 2px solid transparent;
}
.site-nav__links a:hover  { opacity: 1; }
.site-nav__links a.activo { opacity: 1; border-bottom-color: var(--verde-marca); }

/* Destacado temporal en amarillo de marca (lanzamiento) — quitar pasado el primer mes */
.site-nav__links a.nav-highlight { color: var(--verde-marca); opacity: 0.9; }
.site-nav__links a.nav-highlight:hover { opacity: 1; }
.site-nav__links a.nav-highlight.activo { border-bottom-color: var(--verde-marca); }

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Hamburger: oculto en desktop, visible en mobile */
.site-nav__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
}
.site-nav__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--hueso);
    border-radius: 2px;
    transition: transform .2s var(--ease), opacity .2s, width .2s;
}
/* Animación a X cuando el menú está abierto */
.site-nav.menu-open .site-nav__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.menu-open .site-nav__hamburger span:nth-child(2) { opacity: 0; width: 0; }
.site-nav.menu-open .site-nav__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Botón "Únete" — verde (identidad de marca) */
.btn-join {
    display: inline-block;
    font-family: var(--f-body);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    padding: 10px 20px;
    background: var(--verde-marca);
    color: var(--verde-texto);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 0 rgba(0,0,0,0.6), 0 2px 12px rgba(255,231,48,0.2);
    transform: translateY(0);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.btn-join:hover {
    box-shadow: 0 6px 0 rgba(0,0,0,0.6), 0 4px 20px rgba(255,231,48,0.35);
    transform: translateY(-2px);
}
.btn-join:active {
    box-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 1px 6px rgba(255,231,48,0.15);
    transform: translateY(3px);
}

/* Botón rojo — acción primaria */
.btn-rojo {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--f-body);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    padding: 14px 20px;
    background: var(--rojo-accion);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    width: 100%;
    box-shadow: 0 4px 0 rgba(80,0,0,0.9), 0 2px 16px rgba(215,0,0,0.25);
    transform: translateY(0);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.btn-rojo:hover {
    box-shadow: 0 6px 0 rgba(80,0,0,0.9), 0 4px 24px rgba(215,0,0,0.4);
    transform: translateY(-2px);
}
.btn-rojo:active {
    box-shadow: 0 1px 0 rgba(80,0,0,0.9), 0 1px 8px rgba(215,0,0,0.2);
    transform: translateY(3px);
}
.btn-rojo .arrow { transition: transform var(--dur) var(--ease); }
.btn-rojo:hover .arrow { transform: translateX(4px); }

/* ── Sección — wrapper común ───────────────────────────────── */

.section { padding: var(--stack-lg) 0; }

.section__header {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--margin-desk);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--stack-md);
}

/* Línea de contexto bajo el título de sección — explica qué va a ver el
   visitante antes de soltarle un grid de tarjetas sin más. */
.section__sub {
    max-width: var(--max-w);
    margin: -20px auto 24px;
    padding: 0 var(--margin-desk);
    color: var(--gris-meta);
    font-size: 15px;
    line-height: 1.55;
}

.section__link {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--verde-marca);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    white-space: nowrap;
    transition: opacity var(--dur);
}
.section__link:hover { opacity: 0.7; }

/* ── Hero — página de inicio ──────────────────────────────── */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* visible: que el desplegable del buscador no se recorte.
       El fondo va en .hero__bg (inset:0) y el body recorta en horizontal. */
    overflow: visible;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-color: var(--negro-puro);
}

.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Más visible: la oscuridad para el texto la pone el overlay, solo en el centro */
    opacity: 0.85;
}

/* Oscurece SOLO el centro (para el texto) y deja los bordes laterales
   transparentes, para que el diseño de los lados se vea bien.
   Capa 1: elipse central oscura que se desvanece hacia los lados.
   Capa 2: fundido al fondo al pie del hero. */
.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 52% 62% at 50% 44%,
            rgba(8,9,9,0.6) 0%,
            rgba(8,9,9,0.25) 55%,
            rgba(8,9,9,0) 78%),
        linear-gradient(to bottom,
            rgba(8,9,9,0) 55%,
            rgba(8,9,9,0.95) 100%);
}

.hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--margin-desk);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero__title {
    font-family: var(--f-display);
    font-size: var(--t-display-size);
    line-height: var(--t-display-lh);
    letter-spacing: var(--t-display-ls);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--hueso);
    margin-bottom: var(--stack-sm);
}

.hero__lead {
    font-size: var(--t-body-lg);
    line-height: var(--t-body-lg-lh);
    color: var(--gris-meta);
    max-width: 580px;
    margin-bottom: 48px;
}

/* Barra de búsqueda */
.hero__search {
    position: relative;
    width: 100%;
    max-width: 460px;
}

.hero__search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gris-meta);
    pointer-events: none;
}

.hero__search input {
    width: 100%;
    background: rgba(8,9,9,0.72);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-lg);
    color: var(--hueso);
    font-family: var(--f-body);
    font-size: var(--t-body-md);
    padding: 16px 16px 16px 48px;
    outline: none;
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: border-color var(--dur), box-shadow var(--dur);
}
.hero__search input:focus {
    border-color: rgba(255,231,48,0.5);
    box-shadow: 0 0 0 3px rgba(255,231,48,0.08), var(--shadow-md);
}
.hero__search input::placeholder { color: rgba(156,160,140,0.5); }

/* ── Carrusel "Trabajos destacados" ───────────────────────── */

.trending__scroll {
    overflow-x: auto;
    padding: 0 var(--margin-desk) var(--stack-md);
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Sin snap rígido: arrastre fluido tipo carrete. En táctil, scroll nativo. */
    touch-action: pan-x;
    cursor: grab;
}
.trending__scroll.dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.trending__scroll.dragging a { pointer-events: none; }
.trending__scroll::-webkit-scrollbar { display: none; }

.trending__track {
    display: flex;
    gap: var(--gutter);
    width: max-content;
}

/* Tarjeta de artista (carrusel) */
.artist-card {
    min-width: 280px;
    max-width: 360px;
    flex-shrink: 0;
}

.artist-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.artist-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-accent);
}

.artist-card__img-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--carbon-medio);
    margin-bottom: 16px;
    border-radius: var(--radius-md);
}

.artist-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.7s var(--ease);
}
.artist-card:hover .artist-card__img { transform: scale(1.05); }

/* Placeholder sin imagen */
.artist-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--carbon-alto);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-size: 96px;
    font-weight: 800;
    color: rgba(226,226,226,0.07);
    letter-spacing: -0.04em;
    text-transform: uppercase;
    user-select: none;
}

.artist-card__info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.artist-card__text { flex: 1; }

.artist-card__name {
    font-family: var(--f-display);
    font-size: var(--t-headline-md);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.artist-card__meta {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--gris-meta);
}

/* Botón flecha redondo */
.artist-card__btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--border-20);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hueso);
    font-size: 18px;
    line-height: 1;
    transition: border-color var(--dur), color var(--dur), background var(--dur), box-shadow var(--dur);
}
.artist-card:hover .artist-card__btn {
    border-color: var(--verde-marca);
    color: var(--verde-marca);
    background: rgba(255,231,48,0.08);
    box-shadow: 0 0 12px rgba(255,231,48,0.15);
}

/* ── Bento "Explora estilos" ──────────────────────────────── */

.styles-bento {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--margin-desk);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 300px 300px;
    gap: 8px;
}

.styles-bento__item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--carbon-medio);
    border-radius: var(--radius-md);
    display: block;
    text-decoration: none;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.styles-bento__item:hover {
    transform: scale(1.015);
    box-shadow: var(--shadow-md);
    z-index: 1;
}

.styles-bento__item--lg {
    grid-column: span 8;
    grid-row: span 2;
}

.styles-bento__item--sm {
    grid-column: span 4;
    grid-row: span 1;
}

.styles-bento__placeholder {
    width: 100%;
    height: 100%;
    background: var(--carbon-alto);
    transition: background var(--dur);
}
.styles-bento__item:hover .styles-bento__placeholder { background: var(--carbon-max); }

.styles-bento__grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4,5,5,0.92) 0%, transparent 60%);
}

.styles-bento__label {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 1;
}

.styles-bento__sub {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--verde-marca);
    margin-top: 6px;
}

/* ── Sección "Cómo funciona" ──────────────────────────────── */

.how__header {
    text-align: center;
    margin-bottom: var(--stack-lg);
    color: var(--gris-meta);
}
.how__header p.t-label-caps { margin-bottom: 10px; }
.how__header h2 { margin-bottom: 10px; color: var(--hueso); }
.how__lead { max-width: 520px; margin: 0 auto; }

.how__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
}

.how__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease);
}
.how__step:hover {
    border-color: rgba(255,231,48,0.22);
    box-shadow: var(--shadow-accent);
    transform: translateY(-4px);
    background: var(--glass-bg-hover);
}

.how__step-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(255,231,48,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--verde-marca);
    margin-bottom: 24px;
    transition: background var(--dur), color var(--dur), box-shadow var(--dur);
}
.how__step:hover .how__step-icon {
    background: var(--verde-marca);
    color: var(--verde-texto);
    box-shadow: 0 0 24px rgba(255,231,48,0.3);
}

.how__step h3 { margin-bottom: 8px; }
.how__step p  { color: var(--gris-meta); }

/* ── Cabecera de ciudad (sticky) ─────────────────────────── */

.city-header {
    /* En pantallas normales y móvil, la cabecera NO es sticky:
       con las tarjetas Oro grandes (landscape 3:2) bloquearía demasiado viewport.
       Solo se hace sticky en monitores muy grandes donde el espacio sobra. */
    background: rgba(8,9,9,0.82);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
/* La cabecera de ciudad NO debe ser sticky: chocaba con el filter-bar (ambos
   top:72px) y en desktop lo tapaba, dando la sensación de que el filter-bar no
   se congelaba. El único elemento sticky bajo el nav es el filter-bar. */

.city-header__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 24px var(--margin-desk);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.city-header__text h1 { line-height: 1; }
.city-header__text p  { color: var(--gris-meta); margin-top: 8px; max-width: 480px; }

/* Chips de ciudades */
.city-filters {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    align-items: center;
    flex-shrink: 0;
}
.city-filters::-webkit-scrollbar { display: none; }

.city-chip {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    padding: 8px 16px;
    border: 1px solid var(--carbon-max);
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    color: var(--hueso);
    white-space: nowrap;
    transition: border-color var(--dur), color var(--dur), background var(--dur), box-shadow var(--dur);
    text-decoration: none;
}
.city-chip:hover {
    border-color: rgba(255,255,255,0.35);
    color: var(--hueso);
    background: rgba(255,255,255,0.05);
}
.city-chip.activo {
    border-color: rgba(255,255,255,0.55);
    color: #fff;
    background: rgba(255,255,255,0.10);
}

/* Lista de artistas en la página de ciudad */
.city-list {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--stack-md) var(--margin-desk) var(--stack-lg);
}

/* Tarjeta de artista — vista ciudad */
.city-artist-card {
    padding: 28px 0;
    border-bottom: 1px solid var(--carbon-max);
    display: block;
}
.city-artist-card:first-child { border-top: 1px solid var(--carbon-max); }

.city-artist-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.city-artist-card__identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Avatar circular */
.city-artist-card__avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--carbon-max);
}
.city-artist-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-init {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--carbon-alto);
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 700;
    color: rgba(226,226,226,0.3);
    text-transform: uppercase;
}

.city-artist-card__name {
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    transition: color var(--dur);
}
.city-artist-card:hover .city-artist-card__name { color: var(--verde-marca); }

.city-artist-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    color: var(--gris-meta);
    text-transform: uppercase;
}

.city-artist-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

/* Minigalería de 3 fotos */
.city-artist-card__gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.city-artist-card__photo {
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--carbon-alto);
    border-radius: var(--radius-md);
}
.city-artist-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
}
.city-artist-card:hover .city-artist-card__photo img { transform: scale(1.04); }

/* ── Perfil de artista ─────────────────────────────────────── */

/* Cabecera cinemática */
.artist-hero {
    position: relative;
    width: 100%;
    /* Casi tan alto como el hero del home — se ve la foto entera */
    height: clamp(560px, 85vh, 920px);
    background: var(--negro-tinta);
    overflow: hidden;
}

.artist-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A todo color: los artistas aman sus colores, no los apagamos */
    opacity: 1;
}

.artist-hero__grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--negro-tinta) 0%, transparent 55%);
}

/* Información en la parte baja de la imagen */
.artist-hero__info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--stack-md) var(--margin-desk);
}

/* Medallón circular con el retrato del artista (cuando hay cabecera propia) */
.artist-hero__portrait {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--negro-tinta, #040505);
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
    margin-bottom: 18px;
    background: var(--carbon-alto);
}
.artist-hero__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.artist-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
/* Sobre la foto de cabecera el .tag/.badge normal (pensado para fondo sólido
   oscuro) casi no se ve — fondo más opaco + blur para que se lea encima de
   cualquier imagen, clara u oscura. */
.artist-hero__tags .tag {
    background: rgba(8,9,9,0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255,255,255,0.22);
    color: var(--hueso);
}
.artist-hero__tags .badge-open {
    background: rgba(8,9,9,0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: rgba(63,185,80,0.55);
}
.artist-hero__tags .badge-wait { background: rgba(8,9,9,0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.artist-hero__tags .badge-shut { background: rgba(8,9,9,0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-color: rgba(255,255,255,0.22); }

.artist-hero__name {
    font-family: var(--f-display);
    font-size: var(--t-display-size);
    line-height: 0.95;
    letter-spacing: var(--t-display-ls);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--hueso);
    margin-bottom: 10px;
}

.artist-hero__location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-body-md);
    color: var(--gris-meta);
}

/* Canvas principal: contenido + sidebar */
.artist-canvas {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--stack-md) var(--margin-desk) var(--stack-lg);
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.artist-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--stack-md);
}

/* Bio + detalles en cuadrícula 2 col */
.artist-bio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
    background: rgba(20,22,22,0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: var(--stack-md);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
}

/* Glow decorativo morado — del design system */
.artist-bio::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 240px;
    height: 240px;
    background: rgba(119,1,208,0.06);
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.artist-bio h2 { margin-bottom: 12px; }
.artist-bio p  { font-size: var(--t-body-lg); line-height: var(--t-body-lg-lh); color: rgba(226,226,226,0.78); }

.artist-bio__details { display: flex; flex-direction: column; gap: 10px; }
.artist-bio__detail  {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-body-md);
    color: rgba(226,226,226,0.7);
}
.artist-bio__detail .ico { color: var(--verde-marca); flex-shrink: 0; }

/* Sección portfolio */
.portfolio-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
}

/* Bento del portfolio */
.portfolio-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
    gap: 4px;
}

.portfolio-bento__item {
    position: relative;
    overflow: hidden;
    background: var(--carbon);
    cursor: pointer;
    border-radius: var(--radius-md);
}

.portfolio-bento__item--lg   { grid-column: span 2; grid-row: span 2; }
.portfolio-bento__item--wide { grid-column: span 2; }

.portfolio-bento__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: transform 0.7s var(--ease), filter var(--dur);
}
.portfolio-bento__item:hover .portfolio-bento__img {
    transform: scale(1.05);
    filter: grayscale(0);
}

.portfolio-bento__hover {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--hueso);
    transition: opacity var(--dur);
}
.portfolio-bento__item:hover .portfolio-bento__hover { opacity: 1; }

/* ── Sidebar de reserva (sticky en escritorio) ─────────────── */

.booking-sidebar { width: 360px; flex-shrink: 0; }

.booking-panel {
    position: sticky;
    top: 96px;
    background: rgba(12,14,14,0.65);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.06);
    padding: var(--stack-md);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.booking-panel__header { border-bottom: 1px solid var(--border-5); padding-bottom: 16px; }
.booking-panel__header h3 { margin-bottom: 6px; }
.booking-panel__header p  { font-size: var(--t-body-md); color: var(--gris-meta); }

/* ── Tarjeta de reserva enriquecida (escritorio) ───────────── */
.booking-panel__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding-bottom: 18px; border-bottom: 1px solid var(--border-5);
}
.booking-panel__eyebrow {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--verde-marca); font-weight: 700; margin-bottom: 4px;
}
.booking-panel__price { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--hueso); }
.booking-rating {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    padding: 5px 10px; border-radius: var(--radius-pill);
    background: rgba(255,231,48,.1); border: 1px solid rgba(255,231,48,.2);
    text-decoration: none; font-size: 13px;
}
.booking-rating__star { color: var(--verde-marca); }
.booking-rating__avg  { font-weight: 700; color: var(--hueso); }
.booking-rating__count { color: var(--gris-meta); font-size: 12px; }

/* Pastilla de estado de agenda */
.booking-status {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    padding: 7px 14px; border-radius: var(--radius-pill);
    font-size: 13px; font-weight: 600;
}
.booking-status__dot { width: 8px; height: 8px; border-radius: 50%; }
.booking-status--open { background: rgba(54,211,153,.12); color: #36d399; }
.booking-status--open .booking-status__dot { background: #36d399; box-shadow: 0 0 0 3px rgba(54,211,153,.18); }
.booking-status--wait { background: rgba(255,231,48,.1); color: var(--verde-marca); }
.booking-status--wait .booking-status__dot { background: var(--verde-marca); }
.booking-status--shut { background: rgba(255,255,255,.05); color: var(--gris-meta); }
.booking-status--shut .booking-status__dot { background: var(--gris-meta); }

/* Lista de datos clave */
.booking-facts { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.booking-fact {
    display: flex; align-items: center; gap: 10px;
    font-size: var(--t-body-md); color: rgba(226,226,226,.82);
}
.booking-fact svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--verde-marca); }
.booking-fact strong { color: var(--hueso); font-weight: 700; }

/* Microcopy de confianza bajo el CTA */
.booking-microcopy {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 12px; font-size: 12px; color: var(--gris-meta);
}
.booking-microcopy svg { width: 13px; height: 13px; color: #36d399; }

/* Formulario — sin caja, solo líneas */
.inquiry-form { display: flex; flex-direction: column; gap: 14px; }

.form-field { display: flex; flex-direction: column; gap: 4px; }

.form-field label {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--hueso);
}

.form-field input,
.form-field select,
.form-field textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-20);
    color: var(--hueso);
    font-family: var(--f-body);
    font-size: var(--t-body-md);
    padding: 8px 0;
    outline: none;
    width: 100%;
    transition: border-color var(--dur);
    border-radius: 0;
    -webkit-appearance: none;
}
.form-field select { cursor: pointer; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-bottom-color: var(--verde-marca); }

.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(156,160,140,0.45); }

.form-field textarea { resize: none; min-height: 80px; }

/* Mensajes de resultado del formulario */
.form-msg {
    padding: 12px 14px;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    border: 1px solid;
    border-radius: var(--radius-sm);
    line-height: var(--t-label-lh);
}
.form-msg--ok  { border-color: rgba(255,231,48,0.3); color: var(--verde-marca); background: rgba(255,231,48,0.04); }
.form-msg--err { border-color: rgba(215,0,0,0.3);  color: var(--rojo-accion); background: rgba(215,0,0,0.04); }

/* ── Tags y badges ─────────────────────────────────────────── */

.tag {
    display: inline-block;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--carbon-max);
    border-radius: var(--radius-sm);
    color: var(--gris-meta);
    background: var(--glass-bg);
    white-space: nowrap;
}

/* Badge de estado de agenda — verde de marca para "abierta" */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.badge::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.badge-open { background: rgba(63,185,80,0.10); color: var(--verde-agenda); border: 1px solid rgba(63,185,80,0.30); }
.badge-open::before { background: var(--verde-agenda); }
.badge-wait { background: rgba(200,164,92,0.08); color: #C8A45C; border: 1px solid rgba(200,164,92,0.25); }
.badge-wait::before { background: #C8A45C; }
.badge-shut { background: rgba(255,255,255,0.03); color: var(--gris-meta); border: 1px solid var(--border-10); }
.badge-shut::before { background: var(--gris-meta); }

/* ── Estado vacío ──────────────────────────────────────────── */

.empty-state {
    padding: var(--stack-lg) var(--stack-md);
    text-align: center;
    border: 1px dashed var(--border-10);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
}
.empty-state__title {
    font-family: var(--f-display);
    font-size: var(--t-headline-md);
    color: rgba(226,226,226,0.3);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.empty-state p { color: var(--gris-meta); }
.empty-state a { color: var(--rojo-accion); border-bottom: 1px solid currentColor; }

/* ── Página 404 ────────────────────────────────────────────── */

.error-page {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--stack-lg) var(--margin-mob);
}

.error-page__num {
    font-family: var(--f-display);
    font-size: clamp(80px, 20vw, 180px);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(226,226,226,0.12);
    line-height: 1;
    margin-bottom: 24px;
    user-select: none;
}

.error-page h1 { margin-bottom: 12px; }
.error-page p  { color: var(--gris-meta); margin-bottom: 32px; }

/* ── Footer ────────────────────────────────────────────────── */

.site-footer {
    background: var(--negro-tinta);
    border-top: 1px solid var(--border-5);
    margin-top: var(--stack-lg);
}

.site-footer__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 28px var(--margin-desk);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.footer__logo {
    display: inline-block;
    transition: opacity var(--dur);
}
.footer__logo img { display: block; height: 33px; width: auto; }
.footer__logo:hover { opacity: 0.75; }

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}
.footer__links a {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: #474646;
    transition: color var(--dur);
}
.footer__links a:hover { color: var(--verde-marca); }

.footer__copy {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: #474646;
}

/* ── Grid de tarjetas — /estilos y /ciudades ─────────────── */

.grid-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
}

.grid-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    text-decoration: none;
    transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease), background var(--dur);
}
.grid-card:hover {
    border-color: rgba(255,231,48,0.3);
    box-shadow: var(--shadow-accent);
    transform: translateY(-3px);
    background: var(--glass-bg-hover);
}

.grid-card__icon {
    font-size: 24px;
    color: var(--verde-marca);
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--dur);
}
.grid-card:hover .grid-card__icon { opacity: 1; }

.grid-card__body { flex: 1; min-width: 0; }

.grid-card__name {
    font-family: var(--f-display);
    font-size: var(--t-headline-md);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--hueso);
    display: block;
    margin-bottom: 4px;
    transition: color var(--dur);
}
.grid-card:hover .grid-card__name { color: var(--verde-marca); }

.grid-card__meta {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--gris-meta);
}

.grid-card__desc {
    font-size: var(--t-body-md);
    color: rgba(226,226,226,0.5);
    margin-top: 6px;
    line-height: var(--t-body-md-lh);
}

.grid-card__arrow {
    font-size: 18px;
    color: var(--verde-marca);
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--dur), transform var(--dur) var(--ease);
}
.grid-card:hover .grid-card__arrow { opacity: 1; transform: translateX(0); }

/* ── Toggle vista (tarjetas / mapa) ──────────────────────── */

.view-toggle {
    display: flex;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.view-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-family: var(--f-body);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    background: transparent;
    color: var(--gris-meta);
    border: none;
    cursor: pointer;
    transition: background var(--dur), color var(--dur);
}
.view-toggle__btn.activo {
    background: rgba(255,231,48,0.08);
    color: var(--verde-marca);
}
.view-toggle__btn:hover:not(.activo) { color: var(--hueso); }

/* ── Grid de estudios — versión tarjeta v2 ───────────────── */

.studio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
}

.studio-card-v2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease), background var(--dur);
    min-height: 220px;
}
.studio-card-v2:hover {
    border-color: rgba(255,231,48,0.25);
    box-shadow: var(--shadow-accent);
    transform: translateY(-4px);
    background: var(--glass-bg-hover);
}

.studio-card-v2__top { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.studio-card-v2__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.studio-card-v2__icon {
    font-size: 20px;
    color: var(--verde-marca);
    transition: text-shadow var(--dur);
}
.studio-card-v2:hover .studio-card-v2__icon {
    text-shadow: 0 0 12px rgba(255,231,48,0.5);
}

.studio-card-v2__name {
    font-family: var(--f-display);
    font-size: var(--t-headline-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--hueso);
    display: block;
    transition: color var(--dur);
}
.studio-card-v2:hover .studio-card-v2__name { color: var(--verde-marca); }

.studio-card-v2__city {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--gris-meta);
}

.studio-card-v2__desc {
    font-size: 14px;
    color: rgba(226,226,226,0.55);
    line-height: 1.5;
}

.studio-card-v2__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-5);
}

.studio-card-v2__count {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--gris-meta);
}

.studio-card-v2__socials { display: flex; gap: 8px; }

.studio-card-v2__social {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--gris-meta);
    transition: color var(--dur);
}
.studio-card-v2__social:hover { color: var(--verde-marca); }

.studio-card-v2__link {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--verde-marca);
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: border-color var(--dur);
}
.studio-card-v2__link:hover { border-bottom-color: var(--verde-marca); }

/* ── Mapa Leaflet — tema oscuro ──────────────────────────── */

#studio-map {
    border-top: 1px solid var(--glass-border);
}

/* Marcador personalizado amarillo */
.map-marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--verde-marca);
    border: 2px solid rgba(0,0,0,0.6);
    box-shadow: 0 0 10px rgba(255,231,48,0.6);
}

/* Popup del mapa */
.map-popup .leaflet-popup-content-wrapper {
    background: rgba(8,9,9,0.95);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    color: var(--hueso);
}
.map-popup .leaflet-popup-tip { background: rgba(8,9,9,0.95); }

.map-popup__name {
    display: block;
    font-family: 'Syne', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--verde-marca);
    margin-bottom: 4px;
    text-decoration: none;
}
.map-popup__city {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(156,160,140,0.8);
    margin-bottom: 8px;
}
.map-popup__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--verde-marca);
    border: 1px solid rgba(255,231,48,0.3);
    border-radius: 999px;
    padding: 2px 7px;
    margin-bottom: 8px;
}
.map-popup__link {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--verde-marca);
    margin-top: 4px;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.map-popup__link:hover { border-bottom-color: var(--verde-marca); }

/* ── Tarjeta de estudio (listado antiguo — se mantiene por studio.php) ── */

.studio-card {
    padding: 28px 0;
    border-bottom: 1px solid var(--carbon-max);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background var(--dur);
}
.studio-card:first-child { border-top: 1px solid var(--carbon-max); }

.studio-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.studio-card__identity {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* Icono decorativo en lugar de avatar */
.studio-card__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,231,48,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--verde-marca);
    transition: background var(--dur), box-shadow var(--dur);
}
.studio-card:hover .studio-card__icon {
    background: rgba(255,231,48,0.07);
    box-shadow: 0 0 14px rgba(255,231,48,0.15);
}

.studio-card__name {
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    display: block;
    margin-bottom: 4px;
    transition: color var(--dur);
}
.studio-card:hover .studio-card__name { color: var(--verde-marca); }

.studio-card__location {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--gris-meta);
}

.studio-card__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.studio-card__desc {
    font-size: var(--t-body-md);
    color: rgba(226,226,226,0.65);
    line-height: var(--t-body-md-lh);
    max-width: 680px;
    padding-left: 60px; /* alineado con el nombre, debajo del icono */
}

.studio-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 60px;
}

.studio-card__links {
    display: flex;
    gap: 12px;
}

.studio-card__social {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--gris-meta);
    transition: color var(--dur);
}
.studio-card__social:hover { color: var(--verde-marca); }

.studio-card__btn {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--verde-marca);
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: border-color var(--dur), opacity var(--dur);
}
.studio-card__btn:hover { border-bottom-color: var(--verde-marca); }

/* ── Scrollbar personalizada ──────────────────────────────── */

::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: var(--negro-tinta); }
::-webkit-scrollbar-thumb  { background: var(--carbon-max); }
::-webkit-scrollbar-thumb:hover { background: var(--verde-marca); }

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .artist-canvas      { flex-direction: column; }
    .booking-sidebar    { width: 100%; }
    .booking-panel      { position: static; }
    .styles-bento       { grid-template-rows: 240px 240px; }
}

@media (max-width: 1024px) {
    .grid-cards  { grid-template-columns: repeat(2, 1fr); }
    .studio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root { --margin-desk: var(--margin-mob); }

    /* Hamburger visible; links se convierten en drawer vertical */
    .site-nav__hamburger { display: flex; }
    .site-nav__links {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: rgba(8,9,9,.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--glass-border);
        padding: 6px 0 12px;
        z-index: 40;
    }
    .site-nav.menu-open .site-nav__links { display: flex; }
    .site-nav__links li { list-style: none; }
    .site-nav__links a {
        display: block;
        padding: 14px var(--margin-mob);
        font-size: 16px;
        border-bottom: none !important;
        opacity: .85;
    }
    .site-nav__links a:hover,
    .site-nav__links a.activo { opacity: 1; }
    .site-nav__inner  { padding: 0 var(--margin-mob); }

    .grid-cards  { grid-template-columns: 1fr; }
    .studio-grid { grid-template-columns: 1fr; }

    .section__header  { padding: 0 var(--margin-mob); }
    .trending__scroll { padding: 0 var(--margin-mob) var(--stack-md); }

    .styles-bento {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        padding: 0 var(--margin-mob);
    }
    .styles-bento__item--lg { grid-column: span 1; grid-row: span 1; height: 280px; }
    .styles-bento__item--sm { grid-column: span 1; height: 200px; }

    .how__grid { grid-template-columns: 1fr; }

    .city-header__inner { flex-direction: column; }
    .city-list          { padding: var(--stack-md) var(--margin-mob) var(--stack-lg); }
    /* NOTA: los overrides de móvil de .style-hero NO van aquí — las reglas base
       de .style-hero están definidas más abajo en el archivo (~3700) y, a igual
       especificidad, ganarían a este @media. Van en un @media propio JUSTO
       DESPUÉS del bloque base (busca "HERO DEL ESTILO — móvil"). */

    /* En móvil se APILA (mismo patrón que .style-hero/.hub-hero): la imagen
       es una banda de alto fijo arriba, y el texto fluye DEBAJO sobre fondo
       sólido — nunca superpuesto a la foto. Antes, con auto-height + overlay
       absoluto, el título y las etiquetas quedaban encima de la imagen y
       eran ilegibles (y sin retrato, encima no había nada que "asomara"
       para justificar el hueco de 84px). El retrato, si existe, se monta a
       caballo entre la imagen y el texto (efecto "avatar de perfil"). */
    .artist-hero         { height: auto; min-height: 0; overflow: visible; }
    .artist-hero__img    { position: relative; inset: auto; width: 100%; height: 260px; }
    .artist-hero__grad   { display: none; }
    .artist-hero__info   { position: relative; z-index: 1; padding: 0 var(--margin-mob) var(--stack-md); background: var(--negro-tinta); }
    .artist-hero__portrait { width: 92px; height: 92px; margin-top: -46px; margin-bottom: 12px; }
    .artist-hero__tags   { padding-top: 14px; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .artist-hero__name   { font-size: clamp(30px, 10vw, 44px); }
    .artist-canvas       { padding: var(--stack-md) var(--margin-mob) var(--stack-lg); }

    .artist-bio { grid-template-columns: 1fr; }

    .portfolio-bento   { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
    .portfolio-bento__item--lg,
    .portfolio-bento__item--wide { grid-column: span 2; }

    .site-footer__inner { flex-direction: column; text-align: center; }
}

/* ══════════════════════════════════════════════════════════
   PANEL DEL ARTISTA
   ══════════════════════════════════════════════════════════ */

/* Página de login — centrada verticalmente */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}
.login-wrap { width: 100%; max-width: 400px; }

/* Layout principal del panel: sidebar fija + margen en el contenido
   — NO usamos grid porque la sidebar fixed sale del flujo y rompe el 1fr */
.panel-wrap { display: block; min-height: 100vh; }

.panel-sidebar {
    background: rgba(4,5,5,0.97);
    border-right: 1px solid var(--glass-border);
    padding: 32px 20px;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 220px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 10;
}

.panel-logo {
    display: inline-block;
    margin-bottom: 8px;
    text-decoration: none;
}
.panel-logo img { display: block; height: 31px; width: auto; }

.panel-artist-name {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--gris-meta);
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--glass-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.panel-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--gris-meta);
    text-decoration: none;
    transition: background var(--dur), color var(--dur);
}
.panel-nav__item:hover     { background: var(--glass-bg); color: var(--hueso); }
.panel-nav__item.activo    { background: rgba(255,231,48,0.07); color: var(--verde-marca); }
.panel-nav__item--logout   { margin-top: auto; color: rgba(215,0,0,0.7); }
.panel-nav__item--logout:hover { color: var(--rojo-accion); background: rgba(215,0,0,0.06); }

/* Enlace Pro en el sidebar: brillo dorado para destacarlo */
.panel-nav__item--pro { color: var(--verde-marca); opacity: 0.85; }
.panel-nav__item--pro:hover, .panel-nav__item--pro.activo {
    color: var(--verde-marca);
    background: rgba(255,231,48,0.06);
    opacity: 1;
}

.panel-nav__sep {
    height: 1px;
    background: var(--glass-border);
    margin: 12px 0;
}

/* Área de contenido: desplazada el ancho exacto de la sidebar */
.panel-content {
    margin-left: 220px;
    padding: 48px 56px;
    max-width: 900px;
    box-sizing: border-box;
}

/* Cabecera de cada sección del panel */
.panel-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

/* Sección interna con título */
.panel-section { margin-bottom: 48px; }
.panel-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Tarjetas de estadísticas */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
    margin-bottom: 48px;
}
.stat-card {
    padding: 24px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
}
.stat-card__num {
    font-family: var(--f-display);
    font-size: 44px;
    font-weight: 800;
    color: var(--verde-marca);
    line-height: 1;
    margin-bottom: 8px;
}
.stat-card__label {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--gris-meta);
}

/* Lista de contactos recibidos */
.inquiries-list { display: flex; flex-direction: column; gap: 12px; }
.inquiry-item {
    padding: 16px 20px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.inquiry-item__who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inquiry-item__name {
    font-family: var(--f-display);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--hueso);
}
.inquiry-item__email { font-size: var(--t-label); color: var(--gris-meta); }
.inquiry-item__msg   { font-size: var(--t-body-md); color: rgba(226,226,226,0.7); }
.inquiry-item__meta  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--t-label);
    color: var(--gris-meta);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
}

/* Formulario del panel */
.panel-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 520px;
}
.panel-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.panel-form__label {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--hueso);
}
.panel-form__input,
.panel-form__select,
.panel-form__textarea {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--hueso);
    font-family: var(--f-body);
    font-size: var(--t-body-md);
    padding: 10px 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--dur), box-shadow var(--dur);
}
.panel-form__input:focus,
.panel-form__select:focus,
.panel-form__textarea:focus {
    border-color: rgba(255,231,48,0.4);
    box-shadow: 0 0 0 3px rgba(255,231,48,0.06);
}
.panel-form__textarea  { min-height: 120px; resize: vertical; }
.panel-form__select    { cursor: pointer; -webkit-appearance: none; appearance: none; }
/* Opciones del desplegable: fondo oscuro y texto legible (el nativo salía claro) */
.panel-form__select option {
    background-color: #14140f;
    color: var(--hueso);
}
.panel-form__input::placeholder,
.panel-form__textarea::placeholder { color: rgba(156,160,140,0.4); }

/* Opciones de agenda */
.agenda-options { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.agenda-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--glass-bg);
    transition: border-color var(--dur), background var(--dur);
}
.agenda-option:has(input:checked) {
    border-color: rgba(255,231,48,0.35);
    background: rgba(255,231,48,0.04);
}
.agenda-option input[type="radio"] {
    accent-color: var(--verde-marca);
    width: 16px; height: 16px;
    flex-shrink: 0;
}
.agenda-option__label {
    font-family: var(--f-display);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--hueso);
}
.agenda-option__desc { font-size: 13px; color: var(--gris-meta); margin-top: 2px; }

/* Grid de gestión del portfolio */
.portfolio-manage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.portfolio-manage__item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--carbon-medio);
}
.portfolio-manage__img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-manage__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--dur);
}
.portfolio-manage__item:hover .portfolio-manage__overlay { opacity: 1; }
.portfolio-manage__delete {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: rgba(215,0,0,0.85);
    border: none;
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    cursor: pointer;
    transition: background var(--dur);
}
.portfolio-manage__delete:hover { background: var(--rojo-accion); }

/* Zona de drag & drop para subir archivos */
.upload-zone {
    border: 2px dashed var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur), background var(--dur);
}
.upload-zone:hover {
    border-color: rgba(255,231,48,0.35);
    background: rgba(255,231,48,0.03);
}

/* Mensajes flash (ok / error) */
.flash-msg {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    margin-bottom: 28px;
    border: 1px solid;
}
.flash-msg--ok  { border-color: rgba(255,231,48,0.3); color: var(--verde-marca); background: rgba(255,231,48,0.04); }
.flash-msg--err { border-color: rgba(215,0,0,0.3);    color: var(--rojo-accion); background: rgba(215,0,0,0.04); }

/* ── Botones de redes sociales (perfil artista) ──────────── */

.social-buttons {
    display: flex;
    flex-wrap: nowrap;   /* una sola fila */
    gap: 10px;
    margin-top: 16px;
}

/* Cuadrado con bordes redondeados — solo icono + tooltip */
.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);   /* redondeado, no píldora */
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur), filter var(--dur);
    flex-shrink: 0;
    position: relative;
}
.social-btn svg { width: 22px; height: 22px; display: block; }

/* Ocultar texto (accesible: queda para lectores de pantalla) */
.social-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.social-btn:hover  { transform: translateY(-3px); }
.social-btn:active { transform: translateY(1px); }

.social-btn--wa {
    background: #25D366; color: #fff;
    box-shadow: 0 4px 14px rgba(37,211,102,0.35);
}
.social-btn--wa:hover { box-shadow: 0 8px 22px rgba(37,211,102,0.50); }

.social-btn--ig {
    background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(220,39,67,0.35);
}
.social-btn--ig:hover { box-shadow: 0 8px 22px rgba(220,39,67,0.50); }

.social-btn--tt {
    background: #010101; color: #fff;
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.social-btn--tt:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.60); filter: brightness(1.2); }

.social-btn--web {
    background: var(--glass-bg); color: var(--hueso);
    border-color: var(--glass-border);
}
.social-btn--web:hover { background: var(--glass-bg-hover); border-color: rgba(255,255,255,0.2); }

/* Sin enlace configurado — visible pero inactivo */
.social-btn--off {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

/* ── Modal Typeform — solicitud de cita ──────────────────── */

/* Overlay de pantalla completa */
.tf-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(4,5,5,0.97);
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
}
/* El atributo [hidden] tiene menos especificidad que display:flex — forzamos none */
.tf-modal[hidden] { display: none; }
.tf-modal.open {
    opacity: 1;
    pointer-events: all;
}

/* Barra de progreso en la parte superior */
.tf-progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.08);
    z-index: 2;
}
.tf-progress__bar {
    height: 100%;
    background: var(--verde-marca);
    transition: width 0.5s var(--ease);
    border-radius: 0 2px 2px 0;
}

/* Botón cerrar */
.tf-close {
    position: absolute;
    top: 20px; right: 24px;
    z-index: 3;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--gris-meta);
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: border-color var(--dur), color var(--dur), background var(--dur);
}
.tf-close:hover { border-color: var(--hueso); color: var(--hueso); background: var(--glass-bg); }

/* Área de pasos — centrada en pantalla */
/* El área de pasos ocupa todo el espacio disponible */
.tf-body {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Cada paso ocupa TODO el área y lleva su propia nav pegada al contenido */
.tf-step {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* En escritorio: el contenido queda centrado en columna de max 640px */
    padding: 56px max(56px, calc((100% - 640px) / 2)) 40px;
    gap: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* estado inicial: debajo, invisible */
    transform: translateY(56px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.42s var(--ease), opacity 0.38s var(--ease);
}
@media (max-width: 640px) {
    .tf-step { padding: 48px 24px 32px; gap: 20px; }
}
.tf-step.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}
.tf-step.prev {
    transform: translateY(-56px);
    opacity: 0;
    pointer-events: none;
}

/* Contenido del paso — limita ancho en pantallas grandes */
.tf-step__inner {
    width: 100%;
    max-width: 560px;
}

/* ── Selector de zona corporal (paso 1 del Typeform) ──────── */

.body-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.body-selector__fig {
    display: flex;
    justify-content: center;
}

/* Silueta SVG — más grande y centrada */
.body-figure {
    width: 100px;
    height: 222px;
}

/* Zonas SVG: sutiles por defecto, iluminan al seleccionar */
.body-zone {
    fill: rgba(255,255,255,0.05);
    stroke: rgba(255,255,255,0.2);
    stroke-width: 1;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 0.25s, stroke 0.25s;
}
.body-zone:hover { fill: rgba(255,231,48,0.1);  stroke: rgba(255,231,48,0.5); }
.body-zone.sel   { fill: rgba(255,231,48,0.2);  stroke: #FFE730; }

/* Cuando hay zona seleccionada, las demás se atenúan */
.body-figure:has(.body-zone.sel) .body-zone:not(.sel) {
    fill: rgba(255,255,255,0.03);
    stroke: rgba(255,255,255,0.1);
}

/* 3 botones de zona horizontales debajo de la silueta */
.body-zone-btns {
    display: flex;
    gap: 8px;
    width: 100%;
}

.body-zone-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    color: rgba(226,226,226,0.35);
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.body-zone-btn svg { transition: stroke 0.2s; }
.body-zone-btn:hover {
    background: rgba(255,231,48,0.06);
    border-color: rgba(255,231,48,0.3);
    color: rgba(226,226,226,0.8);
    transform: translateY(-1px);
}
.body-zone-btn.sel {
    background: rgba(255,231,48,0.1);
    border-color: #FFE730;
    color: #FFE730;
    box-shadow: 0 0 16px rgba(255,231,48,0.1);
}

/* Hint "Toca la zona" — parpadea suave hasta que el usuario interactúa */
.body-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--verde-marca);
    animation: hintPulse 2.2s ease-in-out infinite;
    transition: opacity 0.3s;
}
.body-hint.oculto { opacity: 0 !important; pointer-events: none; animation: none; }
@keyframes hintPulse {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 1; }
}

/* Pulso en los contornos del SVG mientras no se ha seleccionado zona */
.body-figure.idle .body-zone {
    animation: zonaPulse 3s ease-in-out infinite;
}
.body-figure.idle .body-zone:nth-child(2) { animation-delay: 0.5s; }
.body-figure.idle .body-zone:nth-child(3) { animation-delay: 1s; }
@keyframes zonaPulse {
    0%, 100% { stroke: rgba(255,255,255,0.2); }
    50%       { stroke: rgba(255,255,255,0.5); }
}

/* Chips de zona: animación de entrada al seleccionar zona */
.tf-chips--zona { animation: chipsEntrada 0.22s ease forwards; }
@keyframes chipsEntrada {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Número de paso */
.tf-step__num {
    font-family: var(--f-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--verde-marca);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tf-step__num::after {
    content: '→';
    font-size: 11px;
    color: var(--gris-meta);
}

/* Pregunta principal */
.tf-step__q {
    font-family: var(--f-display);
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 700;
    color: var(--hueso);
    line-height: 1.2;
    margin: 0;
}

/* Input de texto grande estilo Typeform */
.tf-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--glass-border);
    color: var(--hueso);
    font-family: var(--f-body);
    font-size: 22px;
    padding: 12px 0;
    outline: none;
    width: 100%;
    transition: border-color var(--dur);
    caret-color: var(--verde-marca);
}
.tf-input:focus { border-color: var(--verde-marca); }
.tf-input::placeholder { color: rgba(226,226,226,0.25); }

.tf-textarea {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--glass-border);
    color: var(--hueso);
    font-family: var(--f-body);
    font-size: 18px;
    padding: 12px 0;
    outline: none;
    width: 100%;
    resize: none;
    min-height: 100px;
    transition: border-color var(--dur);
    caret-color: var(--verde-marca);
    line-height: 1.6;
}
.tf-textarea:focus { border-color: var(--verde-marca); }
.tf-textarea::placeholder { color: rgba(226,226,226,0.25); }

/* Chips de opciones (zona del cuerpo, estilo) */
.tf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.tf-chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    color: var(--hueso);
    font-family: var(--f-body);
    font-size: var(--t-body-md);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur), background var(--dur), color var(--dur), transform var(--dur);
    user-select: none;
}
.tf-chip:hover { border-color: rgba(255,231,48,0.4); background: rgba(255,231,48,0.04); }
.tf-chip.sel {
    border-color: var(--verde-marca);
    background: rgba(255,231,48,0.08);
    color: var(--verde-marca);
    font-weight: 700;
    transform: scale(1.02);
}

/* Opciones de tamaño */
.tf-sizes { display: flex; flex-direction: column; gap: 10px; }
.tf-size {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    cursor: pointer;
    transition: border-color var(--dur), background var(--dur);
}
.tf-size:hover { border-color: rgba(255,231,48,0.4); background: rgba(255,231,48,0.04); }
.tf-size.sel { border-color: var(--verde-marca); background: rgba(255,231,48,0.08); }
.tf-size__label {
    font-size: var(--t-body-md);
    font-weight: 600;
    color: var(--hueso);
    transition: color var(--dur);
}
.tf-size.sel .tf-size__label { color: var(--verde-marca); }
.tf-size__sub {
    font-size: 12px;
    color: var(--gris-meta);
}
.tf-size__key {
    width: 24px; height: 24px;
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--gris-meta);
    font-family: monospace;
    flex-shrink: 0;
}
.tf-size.sel .tf-size__key { border-color: var(--verde-marca); color: var(--verde-marca); }

/* Zona de subida de imagen (en el modal) */
.tf-upload {
    border: 1.5px dashed var(--glass-border);
    border-radius: var(--radius-md);
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur), background var(--dur);
    position: relative;
}
.tf-upload:hover { border-color: rgba(255,231,48,0.4); background: rgba(255,231,48,0.03); }
.tf-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.tf-upload__icon { font-size: 28px; margin-bottom: 8px; }
.tf-upload__label { font-size: 14px; color: var(--gris-meta); }
.tf-upload__name { font-size: 13px; color: var(--verde-marca); font-weight: 600; margin-top: 6px; }

/* Nota de privacidad imagen */
.tf-note {
    font-size: 11px;
    color: var(--gris-meta);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Enlace "Omitir" */
.tf-skip {
    background: none;
    border: none;
    color: var(--gris-meta);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--dur);
}
.tf-skip:hover { color: var(--hueso); }

/* Pantalla de éxito */
.tf-success {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.tf-success__check {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 2px solid var(--verde-marca);
    background: rgba(255,231,48,0.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
}
.tf-success__title {
    font-family: var(--f-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--hueso);
}
.tf-success__sub { color: var(--gris-meta); max-width: 360px; line-height: 1.6; }

/* Navegación dentro de cada paso — pegada justo debajo del campo */
.tf-step__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-shrink: 0;
}

/* Botón principal (Siguiente / Enviar) */
.tf-btn-ok {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--verde-marca);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--f-body);
    font-size: var(--t-label);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 48px;           /* toque cómodo en móvil */
    transition: transform var(--dur) var(--ease), box-shadow var(--dur);
    box-shadow: 0 4px 16px rgba(255,231,48,0.25);
}
.tf-btn-ok:hover  { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(255,231,48,0.35); }
.tf-btn-ok:active { transform: translateY(1px); }
.tf-btn-ok:disabled { opacity: 0.5; pointer-events: none; }

/* Kbd solo visible en pantallas con teclado físico */
.tf-btn-ok kbd {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 10px;
    font-family: monospace;
}
@media (hover: none) { .tf-btn-ok kbd { display: none; } }

/* Botón secundario (Atrás) */
.tf-btn-prev {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    min-height: 48px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--gris-meta);
    font-family: var(--f-body);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--dur), color var(--dur), background var(--dur);
}
.tf-btn-prev:hover { border-color: var(--hueso); color: var(--hueso); background: var(--glass-bg); }

/* Error de validación */
.tf-error {
    font-size: 13px;
    color: var(--rojo-accion);
    margin-top: -8px;
    display: none;
}
.tf-error.visible { display: block; }

/* Grupo de inputs de contacto */
.tf-contact-group { display: flex; flex-direction: column; gap: 24px; }

/* Sidebar simplificada con el CTA */
.booking-cta { margin-top: 4px; }
.booking-cta p { color: var(--gris-meta); font-size: var(--t-body-md); margin-bottom: 20px; line-height: 1.5; }

.btn-rojo--full { width: 100%; justify-content: center; }

/* Mensaje de éxito inline (sidebar, cuando PHP confirma el envío) */
.booking-sent {
    text-align: center;
    padding: 24px 0;
}
.booking-sent__icon {
    font-size: 32px;
    margin-bottom: 8px;
}
.booking-sent__title {
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--verde-marca);
    margin-bottom: 6px;
}
.booking-sent__sub { color: var(--gris-meta); font-size: 13px; }

/* ── Panel mobile — drawer + barra superior ──────────────── */

/* Barra superior — solo visible en móvil */
.panel-mobile-bar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: rgba(4,5,5,0.97);
    border-bottom: 1px solid var(--glass-border);
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 20;
    gap: 12px;
}

.panel-mobile-bar__artist {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    color: var(--gris-meta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* Botón hamburguesa */
.panel-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}
.panel-hamburger span {
    display: block;
    height: 2px;
    background: var(--hueso);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur), width var(--dur);
    width: 100%;
}
/* Animar a X cuando el drawer está abierto */
.panel-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.panel-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.panel-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay oscuro bajo el drawer */
.panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 9;
    opacity: 0;
    transition: opacity var(--dur);
}

@media (max-width: 768px) {
    /* Mostrar barra superior y overlay */
    .panel-mobile-bar { display: flex; }
    .panel-overlay     { display: block; pointer-events: none; }
    .panel-overlay.visible { opacity: 1; pointer-events: all; }

    /* Sidebar fuera de la pantalla por defecto, desliza al abrir */
    .panel-sidebar {
        transform: translateX(-100%);
        transition: transform 0.32s var(--ease), box-shadow var(--dur);
        z-index: 15;
    }
    .panel-sidebar.open {
        transform: translateX(0);
        box-shadow: 8px 0 40px rgba(0,0,0,0.7);
    }

    /* Contenido ocupa toda la pantalla, con espacio para la barra superior */
    .panel-content {
        margin-left: 0;
        padding: 80px 20px 48px;
        max-width: 100%;
    }

    /* Estadísticas en 1 columna */
    .stat-grid { grid-template-columns: 1fr; gap: 12px; }

    /* Portfolio en 2 columnas */
    .portfolio-manage { grid-template-columns: repeat(2, 1fr); }

    /* Formularios ocupan todo el ancho */
    .panel-form { max-width: 100%; }
    .agenda-options { max-width: 100%; }

    /* Cabecera de sección apilada */
    .panel-page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── Gráficas del dashboard ──────────────────────────────── */

.chart-wrap {
    position: relative;
    width: 100%;
    margin-top: 8px;
}

/* Grid de tarjetas de clics */
.clicks-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
@media (max-width: 768px) {
    .clicks-grid { grid-template-columns: repeat(3, 1fr); }
}

.click-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 16px 12px;
    text-align: center;
}
.click-card__num {
    font-family: var(--f-display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
}
.click-card__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gris-meta);
}

/* ── Movimiento reducido — accesibilidad ─────────────────── */

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

/* ═══════════════════════════════════════════════════════════════
   PÁGINA CUENTA PRO (/panel/pro)
   ═══════════════════════════════════════════════════════════════ */

/* Tarjeta de estado de suscripción */
.pro-status {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--glass-bg);
    margin-bottom: 32px;
}
.pro-status--active {
    border-color: rgba(255,231,48,0.3);
    background: rgba(255,231,48,0.04);
}
.pro-status--inactive {
    border-color: rgba(255,255,255,0.08);
}
.pro-status__icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,231,48,0.12);
    color: var(--verde-marca);
    flex-shrink: 0;
}
.pro-status__icon--off {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.25);
}
.pro-status__info { flex: 1; }
.pro-status__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gris-meta);
    margin-bottom: 4px;
}
.pro-status__plan {
    font-family: var(--f-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--hueso);
}
.pro-status__badge {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    background: rgba(255,231,48,0.15);
    color: var(--verde-marca);
    border: 1px solid rgba(255,231,48,0.3);
}
.pro-status__badge--off {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.1);
}

/* Grid de detalles (inicio / vence / importe) */
.pro-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.pro-detail-card {
    padding: 20px 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--glass-bg);
}
.pro-detail-card__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gris-meta);
    margin-bottom: 8px;
}
.pro-detail-card__val {
    font-size: 20px;
    font-weight: 700;
    color: var(--hueso);
    line-height: 1.2;
}
.pro-detail-card__sub {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--verde-marca);
    margin-top: 4px;
}

/* Lista de beneficios */
.pro-benefits { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.pro-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--t-body-md);
    color: var(--hueso);
}
.pro-benefit__check {
    font-size: 14px;
    font-weight: 800;
    color: var(--verde-marca);
    flex-shrink: 0;
}
.pro-benefit__check--off { color: rgba(255,255,255,0.2); }

/* Bloque de renovación */
.pro-renew {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(224,31,45,0.25);
    background: rgba(224,31,45,0.04);
    margin-top: 32px;
    flex-wrap: wrap;
}
.pro-renew__text { font-size: var(--t-body-md); color: var(--gris-meta); }
.pro-renew__text strong { color: var(--hueso); }

/* Tarjetas de planes (cuando no hay suscripción) */
.pro-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
}
.pro-plan-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 24px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--glass-bg);
}
.pro-plan-card--boost {
    border-color: rgba(255,231,48,0.3);
    background: rgba(255,231,48,0.03);
    position: relative;
}
.pro-plan-card__badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    background: var(--verde-marca);
    color: #000;
    align-self: flex-start;
}
.pro-plan-card__name {
    font-family: var(--f-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--hueso);
}
.pro-plan-card__price {
    font-family: var(--f-head);
    font-size: 36px;
    font-weight: 800;
    color: var(--hueso);
    line-height: 1;
}
.pro-plan-card__price span {
    font-size: 16px;
    font-weight: 500;
    color: var(--gris-meta);
}
.pro-plan-card__items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--gris-meta);
    flex: 1;
}
.pro-plan-card__items li::before { content: '✓  '; color: var(--verde-marca); font-weight: 700; }

/* Responsive móvil */
@media (max-width: 640px) {
    .pro-detail-grid { grid-template-columns: 1fr 1fr; }
    .pro-plans { grid-template-columns: 1fr; }
    .pro-renew { flex-direction: column; align-items: flex-start; }
    .pro-status { flex-wrap: wrap; }
}

/* ── Cuenta Pro: comparativa libre vs pro ─────────────────── */
.pro-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.pro-compare-col {
    padding: 24px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.08);
}
.pro-compare-col--pro {
    border-color: rgba(255,231,48,0.25);
    background: rgba(255,231,48,0.03);
}
.pro-compare-col__title {
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--hueso);
    margin-bottom: 16px;
}
.pro-compare-col--pro .pro-compare-col__title { color: var(--verde-marca); }
.pro-benefit--locked { opacity: 0.35; }

/* ── Plan cards: extensiones para los nuevos planes ─────────── */
.pro-plan-card__desc {
    font-size: 13px;
    color: var(--gris-meta);
    line-height: 1.5;
}
.pro-plan-card--studio-artist {
    border-color: rgba(99,102,241,0.3);
    background: rgba(99,102,241,0.03);
}
.pro-plan-card__badge--discount {
    background: rgba(99,102,241,0.15);
    color: #a5b4fc;
    border: 1px solid rgba(99,102,241,0.3);
}

/* ── Botones de Stripe ───────────────────────────────────────── */
.btn-stripe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: var(--verde-marca);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--f-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}
.btn-stripe:hover { opacity: 0.88; transform: translateY(-1px); }

.btn-stripe--secondary {
    background: transparent;
    color: #a5b4fc;
    border: 1.5px solid rgba(99,102,241,0.4);
}
.btn-stripe--secondary:hover {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.7);
}

/* Botón para el portal de gestión (usuario con plan activo) */
.btn-stripe-portal {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 24px;
    background: transparent;
    color: var(--hueso);
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm);
    font-family: var(--f-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.btn-stripe-portal:hover {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.04);
}

/* Nota de confianza bajo los planes */
.stripe-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 12px;
    color: rgba(226,226,226,0.4);
}
.stripe-trust strong { color: rgba(226,226,226,0.6); }

/* Pro plans: 3 columnas en escritorio, 1 en móvil */
.pro-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) {
    .pro-plans { grid-template-columns: 1fr; }
    .pro-compare-grid { grid-template-columns: 1fr; }
    .pro-detail-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .pro-detail-grid { grid-template-columns: 1fr; }
}

/* ── Badge PRO en tarjetas y perfiles ───────────────────────── */
.badge-pro {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    background: var(--verde-marca);
    color: #000;
    vertical-align: middle;
    margin-left: 6px;
    position: relative;
    top: -2px;
}
/* Versión grande para el hero del perfil de artista */
.badge-pro--hero {
    font-size: 11px;
    padding: 3px 10px;
    top: -4px;
}

/* ── Panel de estudio: listado de artistas vinculados ───────── */
.studio-artists {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.studio-artist-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    padding: 18px 24px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--glass-bg);
    transition: border-color 0.2s;
}
.studio-artist-card:hover { border-color: rgba(255,255,255,0.15); }

.studio-artist-card__who {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 200px;
    min-width: 200px;
}
.studio-artist-card__stats,
.studio-artist-card__status,
.studio-artist-card__actions {
    flex: 0 0 auto;
}
.studio-artist-card__actions { margin-left: auto; }
.studio-artist-card__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
}
.studio-artist-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.studio-artist-card__info { min-width: 0; }
.studio-artist-card__name {
    font-weight: 700;
    font-size: var(--t-body-md);
    color: var(--hueso);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.studio-artist-card__type {
    font-size: 11px;
    color: var(--gris-meta);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.studio-artist-card__stats {
    display: flex;
    gap: 20px;
}
.studio-artist-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.studio-artist-stat__num {
    font-family: var(--f-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--hueso);
}
.studio-artist-stat__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gris-meta);
}

.studio-artist-card__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.studio-artist-card__link {
    font-size: 13px;
    color: var(--gris-meta);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}
.studio-artist-card__link:hover { color: var(--hueso); }
.studio-artist-card__pro-btn {
    padding: 6px 12px;
    border: 1.5px solid rgba(255,231,48,0.3);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--verde-marca);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
}
.studio-artist-card__pro-btn:hover {
    background: rgba(255,231,48,0.08);
    border-color: var(--verde-marca);
}

@media (max-width: 768px) {
    .studio-artist-card__who { flex-basis: 100%; }
    .studio-artist-card__actions { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   SISTEMA DE CONEXIONES (invitaciones artista <-> estudio)
   ═══════════════════════════════════════════════════════════════ */

/* Badge numérico de notificación en el sidebar */
.nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--rojo-accion);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

/* Lista de tarjetas de conexión */
.conn-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.conn-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--glass-bg);
    flex-wrap: wrap;
}
/* Invitación/solicitud entrante: resaltada en amarillo marca */
.conn-card--invite {
    border-color: rgba(255,231,48,0.3);
    background: rgba(255,231,48,0.04);
}
.conn-card--active {
    border-color: rgba(255,255,255,0.12);
}
.conn-card__main { min-width: 0; flex: 1; }
.conn-card__name {
    font-weight: 700;
    font-size: var(--t-body-md);
    color: var(--hueso);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.conn-card__meta {
    font-size: 13px;
    color: var(--gris-meta);
    margin-top: 3px;
}
.conn-card__msg {
    font-size: 13px;
    color: rgba(226,226,226,0.6);
    font-style: italic;
    margin-top: 8px;
    padding-left: 10px;
    border-left: 2px solid rgba(255,231,48,0.3);
}
.conn-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Píldora de estado */
.conn-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.conn-pill--pending {
    background: rgba(255,231,48,0.15);
    color: var(--verde-marca);
}

/* Botones de acción de conexión */
.conn-btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--f-body);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: opacity 0.2s, background 0.2s, border-color 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.conn-btn--accept {
    background: var(--verde-marca);
    color: #000;
    border: none;
}
.conn-btn--accept:hover { opacity: 0.88; }
.conn-btn--reject {
    background: transparent;
    color: rgba(224,31,45,0.85);
    border-color: rgba(224,31,45,0.3);
}
.conn-btn--reject:hover { background: rgba(224,31,45,0.08); border-color: var(--rojo-accion); }
.conn-btn--ghost {
    background: transparent;
    color: var(--gris-meta);
    border-color: rgba(255,255,255,0.15);
}
.conn-btn--ghost:hover { color: var(--hueso); border-color: rgba(255,255,255,0.4); }
.conn-btn--done {
    background: rgba(255,255,255,0.05);
    color: var(--gris-meta);
    border: none;
    cursor: default;
}

/* Buscador AJAX */
.conn-search { position: relative; }
.conn-search__results {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.conn-search__empty {
    color: var(--gris-meta);
    font-size: 13px;
    padding: 8px 4px;
}
.conn-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}
.conn-result__name {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: var(--hueso);
}
.conn-result__city {
    display: block;
    font-size: 12px;
    color: var(--gris-meta);
    margin-top: 2px;
}

@media (max-width: 640px) {
    .conn-card { flex-direction: column; align-items: flex-start; }
    .conn-card__actions { width: 100%; }
    .conn-btn { flex: 1; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   SUBIDA DE IMÁGENES (avatar artista, logo/cover estudio)
   ═══════════════════════════════════════════════════════════════ */

/* Uploader cuadrado (avatar / logo) */
.avatar-uploader {
    display: flex;
    align-items: center;
    gap: 20px;
}
.avatar-uploader__preview {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
}
.avatar-uploader__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.avatar-uploader__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-head);
    font-size: 36px;
    font-weight: 800;
    color: var(--gris-meta);
}
.avatar-uploader__info { flex: 1; }

/* Uploader ancho (cover / hero) */
.cover-uploader__preview {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 6;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04) center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gris-meta);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════════════════════════════
   HERO Y GALERÍA DEL ESTUDIO (perfil público)
   ═══════════════════════════════════════════════════════════════ */

.studio-hero {
    position: relative;
    width: 100%;
    /* Casi tan alto como el hero del home — se ve la foto entera */
    height: clamp(560px, 85vh, 920px);
    overflow: hidden;
    background: var(--negro-tinta);
}
.studio-hero__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.studio-hero__grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--negro-tinta) 4%, rgba(8,9,9,0.35) 60%, transparent 100%);
}
.studio-hero__logo {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--negro-tinta);
    background: var(--carbon-alto);
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}
.studio-hero__logo img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════════════════════
   HERO DE ESTILO Y CIUDAD (páginas /tatuadores/estilo/{slug} y
   /tatuadores/{ciudad}). Mismo patrón que .artist-hero: título
   superpuesto sobre la foto, anclado abajo sobre un degradado.
   Las dos comparten reglas (mismo look) — solo cambia el contenido.
   ═══════════════════════════════════════════════════════════════ */

.style-hero,
.city-hero {
    position: relative;
    width: 100%;
    /* Casi tan alto como el hero del home (100vh) — así se ve la foto
       entera, no solo una franja, y se nota el mismo efecto "infinito". */
    height: clamp(560px, 85vh, 920px);
    overflow: hidden;
    background: var(--negro-tinta);
}
.style-hero__img,
.city-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.style-hero__grad,
.city-hero__grad {
    position: absolute;
    inset: 0;
    /* Se funde con el negro REAL de la página (--negro-tinta), no un gris
       de tarjeta — así no se nota la costura donde termina el hero. */
    background: linear-gradient(to top, var(--negro-tinta) 0%, rgba(8,9,9,0.85) 38%, rgba(8,9,9,0.15) 75%, transparent 100%);
}
.style-hero__info,
.city-hero__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--margin-desk) 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

/* ── HERO DE ESTILO/CIUDAD — móvil ──
   Va JUSTO DESPUÉS del bloque base (y no en el @media general de arriba) a
   propósito: las reglas base están más abajo en el archivo que aquel @media,
   así que a igual especificidad lo pisaban. Aquí, al ir después del base,
   ganan. En móvil NO se superpone el título sobre la foto (queda apretado e
   ilegible sobre zonas cargadas del dibujo): se APILA — imagen como banda
   arriba y el título/botón debajo sobre el fondo oscuro, texto blanco limpio. */
@media (max-width: 768px) {
    .style-hero,
    .city-hero        { height: auto; background: transparent; overflow: visible; }
    .style-hero__img,
    .city-hero__img   { position: relative; inset: auto; width: 100%; height: 220px; }
    .style-hero__grad,
    .city-hero__grad  { display: none; }
    .style-hero__info,
    .city-hero__info  {
        position: static;
        max-width: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 16px var(--margin-mob) 8px;
    }
}

.studio-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.studio-gallery__item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: rgba(255,255,255,0.04);
}
.studio-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.studio-gallery__item:hover img { transform: scale(1.04); }
.studio-gallery__item figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 12px;
    font-size: 11px;
    color: rgba(226,226,226,0.85);
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
}

/* Logo en la tarjeta de listado de estudios */
.studio-card-v2__icon--logo {
    padding: 0;
    overflow: hidden;
}
.studio-card-v2__icon--logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════
   FREE vs PRO — banner de upsell y bloques de cierre
   ═══════════════════════════════════════════════════════════════ */
.upsell-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    margin-bottom: 28px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,231,48,0.35);
    background: rgba(255,231,48,0.06);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.upsell-banner:hover {
    background: rgba(255,231,48,0.1);
    border-color: var(--verde-marca);
}
.upsell-banner__star {
    font-size: 20px;
    color: var(--verde-marca);
    flex-shrink: 0;
}
.upsell-banner__text {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--hueso);
}
.upsell-banner__cta {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--verde-marca);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Bloqueo difuminado de funciones Pro (gráficas, etc.) */
.pro-lock {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.pro-lock__blur {
    filter: blur(6px);
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}
.pro-lock__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
    background: rgba(4,5,5,0.35);
}
.pro-lock__overlay p {
    font-size: 14px;
    color: var(--hueso);
    font-weight: 600;
    max-width: 320px;
}
@media (max-width: 640px) {
    .upsell-banner { flex-wrap: wrap; }
}

/* ── Registro: selector de tipo de cuenta ───────────────────── */
.registro-tipos {
    display: flex;
    gap: 10px;
}
.registro-tipo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    cursor: pointer;
    font-weight: 600;
    color: var(--gris-meta);
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.registro-tipo input { accent-color: var(--verde-marca); }
.registro-tipo:has(input:checked) {
    border-color: var(--verde-marca);
    color: var(--hueso);
    background: rgba(255,231,48,0.06);
}

/* ── Selector de estilos en el panel (checkboxes tipo chip) ──── */
.style-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.style-chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    color: var(--gris-meta);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.style-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.style-chip:hover { border-color: rgba(255,231,48,0.4); color: var(--hueso); }
.style-chip:has(input:checked) {
    border-color: var(--verde-marca);
    background: rgba(255,231,48,0.08);
    color: var(--verde-marca);
    font-weight: 700;
}

/* ── Panel de administración ─────────────────────────────────── */
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--glass-bg);
    flex-wrap: wrap;
}
.admin-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-row__name { font-weight: 700; color: var(--hueso); text-decoration: none; }
.admin-row__name:hover { color: var(--verde-marca); }
.admin-row__meta { font-size: 12px; color: var(--gris-meta); }
.admin-row__actions { display: flex; gap: 8px; flex-shrink: 0; }
.admin-toggle {
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(255,255,255,0.15);
    background: transparent;
    color: var(--gris-meta);
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.admin-toggle:hover { color: var(--hueso); border-color: rgba(255,255,255,0.4); }
.admin-toggle--on {
    border-color: var(--verde-marca);
    background: rgba(255,231,48,0.1);
    color: var(--verde-marca);
}

/* ── Cambio login <-> registro: divisor + botón ancho (CRO) ──── */
.auth-switch {
    margin-top: 28px;
    text-align: center;
}
/* Divisor con texto centrado: línea — texto — línea */
.auth-switch__divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--gris-meta);
}
.auth-switch__divider::before,
.auth-switch__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--glass-border);
}
/* Botón secundario ancho, claramente clicable */
.auth-switch__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px;
    border: 1.5px solid var(--verde-marca);
    border-radius: var(--radius-sm);
    color: var(--verde-marca);
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.2s, transform 0.15s;
}
.auth-switch__btn:hover {
    background: rgba(255,231,48,0.1);
    transform: translateY(-1px);
}
.auth-switch__btn .arrow { transition: transform 0.2s; }
.auth-switch__btn:hover .arrow { transform: translateX(3px); }
/* Enlace discreto de volver */
.auth-back {
    text-align: center;
    margin-top: 18px;
    font-size: 12px;
}
.auth-back a { color: var(--gris-meta); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   HUB DE CIUDAD — /tatuadores/{ciudad}
   Secciones nuevas: kicker, intro, estilos, estudios y FAQ.
   ══════════════════════════════════════════════════════════ */

/* Antetítulo "Los mejores" sobre el h1 */
.city-header__kicker {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gris-meta);
    margin-bottom: 6px;
}

/* Intro con texto real */
.city-intro {
    padding: var(--stack-md, 32px) 0 0;
}
.city-intro__lead {
    font-family: var(--f-body);
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.7;
    color: var(--hueso);
    max-width: 70ch;
}
.city-intro__lead strong { color: var(--hueso); font-weight: 600; }

/* Bloque de sección genérico del hub */
.city-section {
    padding: var(--stack-md, 32px) 0;
}
.city-section__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 28px);
    color: var(--hueso);
    margin-bottom: 18px;
}
.city-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.city-section__link {
    font-family: var(--f-body);
    font-size: 14px;
    color: var(--verde-marca);
    text-decoration: none;
    white-space: nowrap;
}
.city-section__link:hover { text-decoration: underline; }

/* Chips de estilos en la ciudad */
.city-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.city-style-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--carbon);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    color: var(--hueso);
    font-family: var(--f-body);
    font-size: 14px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.city-style-chip:hover {
    border-color: var(--verde-marca);
    background: var(--carbon-medio);
}
.city-style-chip__count {
    font-size: 12px;
    color: var(--gris-meta);
    background: var(--carbon-alto);
    border-radius: var(--radius-pill);
    padding: 1px 7px;
    font-weight: 600;
}

/* Tarjetas de estudios */
.city-studios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.city-studio-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--carbon);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.city-studio-card:hover { border-color: var(--verde-marca); transform: translateY(-2px); }
.city-studio-card__logo {
    width: 52px; height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: grid; place-items: center;
    background: var(--carbon-alto);
    color: var(--verde-marca);
    font-size: 20px;
}
.city-studio-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.city-studio-card__name {
    font-family: var(--f-display);
    font-weight: 600;
    color: var(--hueso);
    font-size: 15px;
    display: flex; align-items: center; gap: 8px;
}
.city-studio-card__meta { color: var(--gris-meta); font-size: 13px; margin-top: 2px; }

/* FAQ acordeón */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.faq-item {
    background: var(--carbon);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 4px 18px;
}
.faq-item__q {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--hueso);
    cursor: pointer;
    padding: 14px 0;
    list-style: none;
    position: relative;
    padding-right: 28px;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
    content: '+';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    color: var(--verde-marca);
    font-size: 22px;
    line-height: 1;
}
.faq-item[open] .faq-item__q::after { content: '–'; }
.faq-item__a {
    color: var(--gris-meta);
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.65;
    padding: 0 0 16px;
}

/* ── Bloques del motor de contenido (banners, guías, HTML del admin) ── */
.cms-block {
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 0 var(--margin-desk, 40px);
}
.cms-block--banner {
    margin-top: 18px;
    margin-bottom: 4px;
}
.cms-block--banner .cms-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: linear-gradient(100deg, var(--carbon-alto), var(--carbon));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 18px 22px;
}
.cms-banner__text { font-family: var(--f-display); font-weight: 600; color: var(--hueso); font-size: 16px; }
.cms-banner__text small { display:block; color: var(--gris-meta); font-weight:400; font-size:13px; margin-top:3px; }
.cms-banner__cta {
    background: var(--verde-marca);
    color: var(--negro-tinta);
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 14px;
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
}
.cms-block--guide { margin: 8px auto; }
.cms-block--guide .cms-guide {
    background: var(--carbon);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 24px 26px;
}
.cms-block--guide h3 { font-family: var(--f-display); color: var(--hueso); margin-bottom: 10px; }
.cms-block--guide p { color: var(--gris-meta); line-height: 1.7; margin-bottom: 10px; }

/* ── Jerarquía de zonas/barrios (Fase B) ── */
.city-crumb { color: var(--gris-meta); text-decoration: none; text-transform: none; letter-spacing: 0; font-weight: 600; }
.city-crumb:hover { color: var(--hueso); }
.city-section__sub { color: var(--gris-meta); font-size: 14px; margin: -8px 0 16px; }

/* ══════════════════════════════════════════════════════════
   CMS (Fase C) — editor de contenido del panel admin
   ══════════════════════════════════════════════════════════ */
.panel-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--negro-tinta);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--hueso);
    font-family: var(--f-body);
    font-size: 14px;
    padding: 10px 12px;
    margin-bottom: 10px;
    transition: border-color .15s;
}
.panel-input:focus { outline: none; border-color: var(--verde-marca); }
.panel-input::placeholder { color: var(--carbon-max); }
.cms-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; }

.cms-help { color: var(--gris-meta); font-size: 13px; margin: -6px 0 16px; line-height: 1.6; }
.cms-help code { background: var(--carbon); padding: 1px 6px; border-radius: 4px; color: var(--hueso); }
.cms-label { display: block; font-size: 12px; color: var(--gris-meta); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }

/* Formularios en línea (crear ciudad / zona) */
.cms-inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cms-inline-form .panel-input { width: auto; flex: 1; min-width: 180px; margin-bottom: 0; }
.cms-inline-form--zona { margin-top: 10px; padding-left: 16px; }
.cms-form .panel-input { margin-bottom: 14px; }

/* Listado de ubicaciones */
.cms-loc { border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 14px; background: var(--carbon); }
.cms-loc__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.cms-loc__row--zona { padding-left: 18px; border-top: 1px solid var(--glass-border); }
.cms-loc__name { font-family: var(--f-display); font-weight: 600; color: var(--hueso); }
.cms-loc__meta { color: var(--gris-meta); font-size: 12px; margin-left: 10px; }
.cms-loc__actions { display: flex; gap: 8px; }

/* Tarjetas editables (FAQ / bloques) */
.cms-card { border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px; background: var(--carbon); }
.cms-card--add { border-style: dashed; }
.cms-card__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cms-mini { display: inline-flex; align-items: center; gap: 6px; color: var(--gris-meta); font-size: 13px; }
.cms-num { width: 70px; margin-bottom: 0; }
.cms-sel { width: auto; margin-bottom: 0; padding: 6px 10px; }
.cms-danger { color: #FF6B6B; }
.cms-danger:hover { border-color: #FF6B6B; }

/* ── Barra de reclamación de perfil sembrado ── */
.claim-bar {
    background: linear-gradient(100deg, var(--carbon-alto), var(--carbon));
    border-bottom: 1px solid var(--glass-border);
}
.claim-bar__inner {
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 12px var(--margin-desk, 40px);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.claim-bar__text { color: var(--hueso); font-size: 14px; }
.claim-bar__cta {
    background: var(--verde-marca); color: var(--negro-tinta);
    font-family: var(--f-body); font-weight: 600; font-size: 14px;
    padding: 9px 16px; border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap;
}

/* ── Vista de detalle de cliente (admin, solo lectura) ── */
.stat-card__num { display: block; }
.stat-card__lbl {
    display: block;
    font-size: var(--t-label, 12px);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gris-meta);
    font-weight: 600;
}
.kv-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.kv {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border);
    font-size: 14px;
}
.kv--full { grid-column: 1 / -1; }
.kv__k { color: var(--gris-meta); min-width: 130px; flex-shrink: 0; }
.kv__v { color: var(--hueso); word-break: break-word; }
@media (max-width: 720px) { .kv-list { grid-template-columns: 1fr; } }

/* ── Admin: buscador, resultados, listas con scroll, grid de edición ── */
.admin-search { margin-bottom: 22px; }
.admin-results { margin-top: 10px; border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; }
.admin-results__empty { padding: 16px; color: var(--gris-meta); }
.admin-result {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; text-decoration: none;
    border-bottom: 1px solid var(--glass-border);
    transition: background .12s;
}
.admin-result:last-child { border-bottom: none; }
.admin-result:hover { background: var(--carbon-medio); }
.admin-result__tag {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 2px 8px; border-radius: var(--radius-pill); flex-shrink: 0;
}
.admin-result__tag--artist { background: rgba(63,185,80,.15); color: var(--verde-agenda); }
.admin-result__tag--studio { background: rgba(255,255,255,.08); color: var(--hueso); }
.admin-result__name { color: var(--hueso); font-weight: 600; }
.admin-result__city { color: var(--gris-meta); font-size: 13px; }
.admin-result__go { margin-left: auto; color: var(--gris-meta); font-size: 13px; }

.admin-scroll { max-height: 460px; overflow-y: auto; padding-right: 4px; }
.admin-scroll::-webkit-scrollbar { width: 8px; }
.admin-scroll::-webkit-scrollbar-thumb { background: var(--carbon-alto); border-radius: 4px; }

.admin-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .admin-grid2 { grid-template-columns: 1fr; } }

/* ── Autocompletado del buscador del hero + página /buscar ── */
.hero__search { position: relative; }
.hero-sug {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    background: var(--carbon); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); overflow: hidden; z-index: 50;
    text-align: left; box-shadow: 0 20px 50px rgba(0,0,0,.5);
    max-height: min(70vh, 460px); overflow-y: auto;
}
.hero-sug__group {
    padding: 10px 16px 4px; font-size: 11px; text-transform: uppercase;
    letter-spacing: .08em; color: var(--gris-meta); font-weight: 700;
}
.hero-sug__item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 9px 16px; text-decoration: none; color: var(--hueso); font-size: 15px;
}
.hero-sug__item:hover { background: var(--carbon-medio); }
.hero-sug__item small { color: var(--gris-meta); font-size: 12px; }
.hero-sug__all {
    display: block; padding: 12px 16px; text-align: center;
    color: var(--verde-marca); text-decoration: none; font-size: 14px; font-weight: 600;
    border-top: 1px solid var(--glass-border);
    position: sticky; bottom: 0; background: var(--carbon-alto);
}
.hero-sug__all:hover { background: var(--carbon-medio); }
.hero-sug__empty { padding: 16px; color: var(--gris-meta); }

.buscar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.buscar-item {
    display: block; padding: 14px 16px; background: var(--carbon);
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
    color: var(--hueso); text-decoration: none; transition: border-color .15s;
}
.buscar-item:hover { border-color: var(--verde-marca); }
.buscar-item small { color: var(--gris-meta); }

/* ── Miniaturas de imágenes en el admin ── */
.admin-thumb {
    display: block; width: 96px; height: 96px; object-fit: cover;
    border-radius: var(--radius-sm); border: 1px solid var(--glass-border);
    margin-bottom: 8px;
}
.admin-thumb--wide { width: 100%; max-width: 320px; height: 96px; }
.admin-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-thumbs .admin-thumb { margin-bottom: 0; width: 72px; height: 72px; }

/* ── Selector de punto focal de imágenes (control de encuadre) ── */
.focal-field { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; flex-wrap: wrap; }
.focal {
    position: relative; cursor: crosshair; flex: 1; min-width: 180px; max-width: 260px;
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm); overflow: hidden;
    background: var(--negro-tinta);
}
.focal__img { display: block; width: 100%; height: auto; user-select: none; }
.focal__dot {
    position: absolute; width: 18px; height: 18px; transform: translate(-50%, -50%);
    border: 2px solid #fff; border-radius: 50%; background: rgba(255,231,48,.5);
    box-shadow: 0 0 0 2px rgba(0,0,0,.4); pointer-events: none;
}
.focal-preview { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--glass-border); flex-shrink: 0; }
.focal-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.focal-preview--square { width: 110px; height: 110px; }
.focal-preview--wide   { width: 200px; height: 75px; }
.focal-preview__tag {
    position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
    font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--hueso); background: rgba(0,0,0,.55); padding: 2px;
}

/* ── Home: kicker del hero, grid de ciudades, CTA de tatuadores ── */
.hero__kicker {
    font-family: var(--f-body);
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gris-meta);
    margin-bottom: 14px;
}
.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}
.home-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 20px;
    background: var(--carbon);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.home-card:hover { border-color: var(--verde-marca); transform: translateY(-2px); }
.home-card__name { font-family: var(--f-display); font-weight: 700; color: var(--hueso); font-size: 18px; }
.home-card__meta { color: var(--gris-meta); font-size: 13px; }
.home-card__arrow { position: absolute; top: 16px; right: 18px; color: var(--gris-meta); }

.home-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    padding: 30px 34px;
    /* Vidrio, no bloque gris sólido — mismo tratamiento que .demo-cta */
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}
.home-cta__text { max-width: 620px; }
.home-cta__text p { color: var(--gris-meta); margin-top: 6px; line-height: 1.6; }
.home-cta__btn {
    background: var(--verde-marca);
    color: var(--negro-tinta);
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 15px;
    padding: 14px 24px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s;
}
.home-cta__btn:hover { transform: translateY(-2px); }
@media (max-width: 600px) { .home-cta { flex-direction: column; align-items: flex-start; } }

/* ══ TILES DE TAXONOMÍA — ciudades y estilos en home ══════════════════════
   Tarjetas visuales con gradiente de fondo, nombre y contador.
   Sin imágenes reales por ahora; se añadirán como background-image cuando estén.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   PERFIL MODELO (/ejemplo) — demo anotada de cómo funciona
   ══════════════════════════════════════════════════════════ */
.demo-banner {
    background: linear-gradient(90deg, rgba(224,31,45,0.14), rgba(224,31,45,0.04));
    border-bottom: 1px solid var(--glass-border);
}
.demo-banner__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 14px var(--margin-desk);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.demo-banner__msg { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; min-width: 240px; }
.demo-banner__msg p { color: var(--hueso); font-size: 14px; margin: 0; max-width: 640px; }
.demo-banner__tag {
    display: inline-block;
    font-size: var(--t-label);
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    font-weight: 700;
    /* Chip AMARILLO relleno: antes era un borde gris que parecía un campo vacío. */
    color: var(--verde-marca);
    background: rgba(255,231,48,0.14);
    border: 1px solid rgba(255,231,48,0.42);
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    white-space: nowrap;
}
.demo-banner__cta { width: auto; flex-shrink: 0; white-space: nowrap; }
/* En las tarjetas showcase el tag no debe estirarse a lo ancho del cuerpo flex. */
.showcase-card__body .demo-banner__tag { align-self: flex-start; }

/* Botones rojos a ANCHO NATURAL (no a todo lo ancho) en secciones de marketing. */
.showcase-foot .btn-rojo,
.cf-hero-cta .btn-rojo { width: auto; }

.demo-body { padding-top: 28px; padding-bottom: 40px; }

/* Retrato placeholder (no una cara inventada) */
.demo-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--gris-meta);
    background: var(--carbon-alto);
    border-style: dashed !important;
}
.demo-portrait svg { width: 46px; height: 46px; }
.demo-portrait span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }

/* Nota explicativa */
/* Sin caja rellena: solo una línea de acento a la izquierda, para que no se
   apilen "rectángulos grises" a lo largo de la página — se funde con el fondo. */
.demo-note {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: transparent;
    border: none;
    border-left: 2px solid var(--verde-marca);
    padding: 2px 0 2px 18px;
    margin: 22px 0 10px;
}
.demo-note div { color: var(--gris-meta); font-size: 14px; line-height: 1.5; }
.demo-note strong { color: var(--hueso); }
.demo-note__badge {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--verde-marca);
    color: #111;
    font-weight: 800;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.demo-intro { text-align: center; max-width: 620px; margin: 4px auto 26px; }
.demo-intro p { color: var(--gris-meta); margin-top: 8px; line-height: 1.55; }

.demo-section { margin-top: 34px; }
.demo-section > .t-headline-md { margin-bottom: 8px; }
.demo-lead { color: var(--gris-meta); max-width: 640px; line-height: 1.55; }

/* Bio de ejemplo */
.demo-bio {
    margin: 14px 0 0;
    padding: 18px 20px;
    background: var(--carbon-alto);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--gris-outline);
    border-radius: var(--radius-md);
    color: var(--hueso);
    font-size: 16px;
    line-height: 1.6;
    font-style: italic;
}
.demo-bio__hint {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 12px;
    color: var(--gris-meta);
}

/* Reseña de ejemplo dentro del box */
.demo-review { margin: 6px 0 0; }
.demo-review__stars { color: #f5b301; letter-spacing: 2px; font-size: 15px; }
.demo-review__text { color: var(--hueso); font-size: 14px; line-height: 1.5; margin-top: 6px; }
.demo-review__author { color: var(--gris-meta); font-size: 12px; margin-top: 6px; }

/* Cómo empezar en 3 pasos */
.demo-steps {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.demo-step {
    background: var(--glass-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--glass-border);
    border-bottom: 2px solid rgba(255,231,48,0.35);
    border-radius: var(--radius-md);
    padding: 20px 18px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.demo-step__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--verde-marca);
    color: #111;
    font-weight: 800;
    margin-bottom: 10px;
}
.demo-step h3 { color: var(--hueso); font-size: 16px; margin-bottom: 4px; }
.demo-step p { color: var(--gris-meta); font-size: 14px; line-height: 1.5; }

/* Galería de ejemplo */
.demo-works {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.demo-work {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--carbon-max);
}
.demo-work img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-work--add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--gris-meta);
    border: 1px dashed var(--glass-border);
}
.demo-work--add svg { width: 30px; height: 30px; }
.demo-work--add span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }

/* Botones de contacto de ejemplo (estáticos) */
.demo-social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.demo-social__btn {
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,231,48,0.28);
    background: rgba(255,231,48,0.08);
    color: var(--hueso);
    font-size: 14px;
    font-weight: 600;
}
.demo-social__btn--wa { background: rgba(37,211,102,0.14); border-color: rgba(37,211,102,0.4); }
.demo-social__btn--ig { background: rgba(225,48,108,0.14); border-color: rgba(225,48,108,0.4); }

/* Cita + reseñas: degradado sutil + acento superior en vez de gris plano */
.demo-book { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.demo-book__box {
    background: linear-gradient(160deg, var(--carbon-alto) 0%, var(--carbon) 130%);
    border: 1px solid var(--glass-border);
    border-top: 2px solid var(--verde-marca);
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.demo-book__title { font-weight: 700; color: var(--hueso); margin-bottom: 6px; }
.demo-book__sub { color: var(--gris-meta); font-size: 14px; line-height: 1.5; }
.demo-book__btn {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: var(--verde-marca);
    color: #111;
    font-weight: 700;
    font-size: 14px;
}

/* CTA final */
.demo-cta {
    position: relative;
    overflow: hidden;
    margin: 44px 0 10px;
    text-align: center;
    /* Vidrio 3D real: tinte blanco casi plano (sin degradado ni luz interna
       que se note) + blur fuerte — la transparencia y el desenfoque hacen
       el efecto cristal, no una "luz" pintada dentro de la caja. */
    background: rgba(255,255,255,0.035);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--glass-border);
    border-top: 2px solid rgba(255,231,48,0.75);
    border-radius: var(--radius-lg);
    padding: 40px 24px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
    /* Halo blanco suave alrededor (efecto "glow"/ambient light) — da la
       sensación de que la caja flota. filter en vez de box-shadow porque
       overflow:hidden recortaría un box-shadow externo. */
    filter: drop-shadow(0 0 50px rgba(255,255,255,0.10));
}
.demo-cta p { color: var(--gris-meta); margin: 10px auto 22px; max-width: 460px; }
.demo-cta__btn { display: inline-block; width: auto; max-width: 320px; }
.demo-cta__mini { font-size: 13px; margin-top: 16px; }
.demo-cta__mini a { color: var(--hueso); text-decoration: underline; }

@media (max-width: 768px) {
    .demo-book { grid-template-columns: 1fr; }
    .demo-works { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .demo-banner__cta { width: 100%; text-align: center; }
    .demo-steps { grid-template-columns: 1fr; }
}

/* Equipo del estudio (ejemplo) */
.demo-team { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.demo-team__member { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; }
.demo-team__avatar {
    width: 60px; height: 60px; border-radius: 50%;
    border: 1px dashed var(--glass-border); background: var(--carbon-alto);
    display: flex; align-items: center; justify-content: center; color: var(--gris-meta);
}
.demo-team__avatar svg { width: 30px; height: 30px; }
.demo-team__name { font-size: 12px; color: var(--gris-meta); }

/* ══ Showcase del "piso piloto" (home + /como-funciona) ══ */
.showcase-intro {
    color: var(--gris-meta);
    max-width: 640px;
    margin: 0 0 18px;
    line-height: 1.55;
}
.showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
/* Imagen (ilustración moderna, fondo claro) arriba + franja de texto en
   vidrio debajo (mismo bisel/glass que .demo-cta). */
.showcase-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-bottom: 2px solid rgba(255,231,48,0.75);
    background: rgba(255,255,255,0.025);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.showcase-card:hover {
    border-color: rgba(255,255,255,0.30);
    border-bottom-color: rgba(255,231,48,0.9);
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
.showcase-card__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--carbon-max); }
.showcase-card__grad { display: none; } /* (no se usa en este diseño) */
.showcase-card__body {
    padding: 20px 22px 22px;
    background: rgba(255,255,255,0.025);
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.showcase-card__body h3 { font-family: var(--f-display); font-size: 22px; text-transform: uppercase; color: var(--hueso); line-height: 1.05; }
.showcase-card__body p { color: var(--gris-meta); font-size: 14px; line-height: 1.45; }
.showcase-card__cta {
    margin-top: 2px; color: var(--verde-marca); font-weight: 700;
    font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase;
    display: inline-flex; gap: 6px;
}
.showcase-card:hover .showcase-card__cta span { transform: translateX(4px); transition: transform var(--dur); }
.showcase-foot {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 22px;
}

/* ══ Landing /como-funciona ══ */
.cf-hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.cf-hero-link { color: var(--hueso); font-weight: 600; text-decoration: none; }
.cf-hero-link:hover { color: var(--verde-marca); }
.cf-section { padding: 52px 0; }
/* Antes era un bloque gris plano (var(--carbon-alto), muy claro contra el
   negro de fondo) que se veía como una franja pegada encima del diseño.
   Ahora es apenas un tinte — separa la sección sin cortar de golpe. */
.cf-section--alt { background: rgba(255,255,255,0.02); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); }
.cf-head { max-width: 640px; margin: 0 auto 28px; text-align: center; }
.cf-head p { color: var(--gris-meta); margin-top: 8px; line-height: 1.55; }
.cf-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cf-feature {
    background: var(--glass-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); padding: 22px 20px;
}
.cf-feature__dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--verde-marca); margin-bottom: 12px; }
.cf-feature h3 { color: var(--hueso); font-size: 16px; margin-bottom: 6px; }
.cf-feature p { color: var(--gris-meta); font-size: 14px; line-height: 1.5; }
.cf-pricing {
    max-width: 680px; margin: 0 auto; text-align: center;
    background: var(--glass-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); padding: 34px 28px;
}
.cf-pricing__badge {
    display: inline-block; margin-bottom: 14px; padding: 6px 16px;
    border-radius: var(--radius-pill); background: var(--verde-marca); color: #111;
    font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em;
}
.cf-pricing__lead { color: var(--hueso); line-height: 1.6; }
.cf-pricing__note { color: var(--gris-meta); font-size: 14px; line-height: 1.55; margin-top: 12px; }
.cf-pricing__btn { display: inline-block; width: auto; max-width: 320px; margin-top: 20px; }

@media (max-width: 900px) {
    .cf-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .showcase-grid { grid-template-columns: 1fr; }
    .cf-features { grid-template-columns: 1fr; }
    .cf-section { padding: 40px 0; }
}

/* ── Buscador + tarjetas de la página /estilos ─────────────── */
.style-search {
    position: relative;
    max-width: 520px;
    margin: 0 auto 22px;
    padding: 0 var(--margin-desk);
}
.style-search__icon {
    position: absolute;
    left: calc(var(--margin-desk) + 16px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--gris-meta);
    pointer-events: none;
}
.style-search input {
    width: 100%;
    padding: 13px 16px 13px 46px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--hueso);
    font-size: 15px;
    outline: none;
    transition: border-color var(--dur), background var(--dur);
}
.style-search input::placeholder { color: var(--gris-meta); }
.style-search input:focus {
    border-color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.05);
}

/* ── HERO de las páginas padre (/estilos, /ciudades) ──
   Banda con imagen de fondo (reutiliza un hero existente, oscurecido como
   textura) + título + intro + buscador integrado. Elimina el vacío muerto
   que quedaba entre la cabecera de texto y el buscador. */
.hub-hero {
    position: relative;
    overflow: hidden;
    background: var(--negro-tinta);
    /* Sin border-bottom: la propia foto se disuelve en el negro de la
       página (ver __overlay) — una línea aquí cortaría ese efecto. */
    display: flex;
    align-items: center;
    /* Casi tan alto como el hero del home — se ve la foto entera */
    min-height: clamp(560px, 85vh, 920px);
}
.hub-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.62;
}
.hub-hero__overlay {
    position: absolute;
    inset: 0;
    /* Oscuro SOLO a la izquierda (donde va el texto, para que se lea) y casi
       transparente a la derecha (para que la imagen se vea bien). */
    background:
        linear-gradient(to right, rgba(8,9,9,0.94) 0%, rgba(8,9,9,0.68) 34%, rgba(8,9,9,0.22) 66%, rgba(8,9,9,0.04) 100%),
        linear-gradient(to top, rgba(8,9,9,0.96) 0%, rgba(8,9,9,0.35) 55%, transparent 100%);
}
.hub-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 40px var(--margin-desk);
}
.hub-hero__intro {
    color: var(--gris-meta);
    max-width: 560px;
    margin-top: 10px;
    line-height: 1.55;
}
.hub-search { margin-top: 26px; max-width: 560px; }
.hub-search__prompt {
    font-family: var(--f-display);
    font-size: var(--t-headline-md);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--hueso);
    margin-bottom: 12px;
}
/* La caja de búsqueda, dentro del hero: alineada a la izquierda (no centrada) */
.hub-search .style-search { max-width: none; margin: 0; padding: 0; }
.hub-search .style-search__icon { left: 16px; }

@media (max-width: 768px) {
    .hub-hero { min-height: 0; }
    .hub-hero__inner { padding: 32px var(--margin-mob) 30px; }
    .hub-search { margin-top: 20px; }
}

/* Rejilla de estilos/ciudades: MÁXIMO 3 de ancho. La doble clase
   .tax-grid.tax-grid--3 es OBLIGATORIA (2 clases) para ganarle a la regla base
   .tax-grid (auto-fill, definida más abajo) por especificidad, no por orden. */
.style-grid,
.tax-grid.tax-grid--3 {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--margin-desk);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) {
    .style-grid,
    .tax-grid.tax-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
.style-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--carbon-alto);
    border: 1px solid var(--glass-border);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.style-card:hover {
    border-color: rgba(255,255,255,0.28);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.style-card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--carbon-max);
    overflow: hidden;
}
.style-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.style-card__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--gris-outline);
}
.style-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.style-card__name {
    font-family: var(--f-display);
    font-size: 18px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--hueso);
    line-height: 1.1;
}
.style-card__desc {
    color: var(--gris-meta);
    font-size: 13px;
    line-height: 1.35;
    /* Una sola línea, con puntos suspensivos si no cabe. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.style-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--verde-marca);
    font-size: var(--t-label);
    letter-spacing: var(--t-label-ls);
    text-transform: uppercase;
    font-weight: 700;
}
.style-card__arrow { transition: transform var(--dur); }
.style-card:hover .style-card__arrow { transform: translateX(4px); }
.style-noresults {
    text-align: center;
    color: var(--gris-meta);
    padding: 32px var(--margin-desk);
}
@media (max-width: 768px) {
    .style-grid,
    .tax-grid.tax-grid--3 { gap: 10px; }
    .style-search { padding: 0 var(--margin-mob); }
    .style-search__icon { left: calc(var(--margin-mob) + 16px); }
    .style-card__name { font-size: 16px; }
    .style-card__desc { font-size: 12px; }
}

.tax-grid {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--margin-desk);
    display: grid;
    /* 4 en escritorio (tarjetas grandes) — el móvil/tablet lo reduce más abajo */
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.tax-tile {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: block;
    text-decoration: none;
    background: var(--carbon-alto);
    border: 1px solid var(--glass-border);
    transition: transform .15s var(--ease), border-color .15s;
}
.tax-tile:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); }

/* 4 variantes de gradiente de fondo — ciclan por índice en PHP */
.tax-tile--a { background: linear-gradient(140deg, #111d11 0%, #1e301e 100%); }
.tax-tile--b { background: linear-gradient(140deg, #1d1111 0%, #2e1818 100%); }
.tax-tile--c { background: linear-gradient(140deg, #111524 0%, #1c2240 100%); }
.tax-tile--d { background: linear-gradient(140deg, #1a1824 0%, #28253a 100%); }

/* Línea de acento superior */
.tax-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--verde-marca);
    opacity: .55;
    z-index: 2;
}
.tax-tile--b::before { background: var(--rojo-accion); }
.tax-tile--c::before { background: #4A7FD6; }
.tax-tile--d::before { background: #8A6FF0; }

/* Gradiente de texto — cubre el tercio inferior */
.tax-tile__grad {
    position: absolute;
    inset: 35% 0 0 0;
    background: linear-gradient(to top, rgba(4,5,5,.92) 0%, transparent 100%);
    z-index: 1;
}

/* Cuerpo de texto */
.tax-tile__body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 14px 16px;
    z-index: 2;
}
.tax-tile__name {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--hueso);
    line-height: 1.2;
    display: block;
}
.tax-tile__count {
    font-size: 12px;
    color: var(--gris-meta);
    margin-top: 3px;
    display: block;
}

/* Imagen de fondo opcional (cuando exista, se pone como inline style) */
.tax-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
    z-index: 0;
}
.tax-tile:hover .tax-tile__img { transform: scale(1.05); }

@media (max-width: 600px) {
    .tax-grid { grid-template-columns: repeat(2, 1fr); padding: 0 var(--margin-mob); }
    .tax-tile { aspect-ratio: 4 / 3; }
}
@media (min-width: 601px) and (max-width: 900px) {
    .tax-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Carrusel de destacados: flechas + arrastre ── */
.trending__head-actions { display: flex; align-items: center; gap: 8px; }
.trending__arrow {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--glass-border); background: var(--carbon);
    color: var(--hueso); font-size: 20px; line-height: 1; cursor: pointer;
    display: grid; place-items: center; transition: border-color .15s, background .15s;
}
.trending__arrow:hover { border-color: var(--verde-marca); background: var(--carbon-medio); }
#trending-scroll { cursor: grab; }
#trending-scroll.dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
#trending-scroll.dragging a { pointer-events: none; }

/* ── Tratamiento visual por tier en los listados (monetización) ── */
.city-artist-card--oro {
    border: 1px solid rgba(255,231,48,0.55);
    box-shadow: 0 0 0 1px rgba(255,231,48,0.12), 0 14px 40px rgba(0,0,0,0.45);
    background: linear-gradient(180deg, rgba(255,231,48,0.04), transparent 120px);
    border-radius: var(--radius-md);
    position: relative;
}
.city-artist-card--oro::before {
    content: "Destacado";
    position: absolute; top: 0; right: 0;
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--negro-tinta); background: var(--verde-marca);
    padding: 3px 9px; border-bottom-left-radius: var(--radius-sm);
}
.city-artist-card--plata {
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-md);
}

/* ── Barra de listado + toggle de vista grid/lista ── */
.list-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 18px;
}
.list-bar__count { color: var(--gris-meta); font-size: 14px; }
.view-toggle { display: inline-flex; gap: 4px; border: 1px solid var(--glass-border); border-radius: var(--radius-pill); padding: 3px; overflow: visible; }
.view-toggle__btn {
    /* Resetea padding/gap del bloque genérico más arriba en el archivo */
    width: 34px; height: 30px; padding: 0; gap: 0;
    display: grid; place-items: center;
    background: transparent; border: none; border-radius: var(--radius-pill);
    color: var(--gris-meta); cursor: pointer; transition: background .15s, color .15s;
    font-size: 0; /* oculta texto residual */
}
.view-toggle__btn svg { display: block; } /* asegura que el SVG sea inline-block */
.view-toggle__btn.activo { background: var(--carbon-alto); color: var(--hueso); }

/* Vista cuadrícula: el grid lo define cada .tier-zone, no el contenedor */
.city-list.view-grid { display: flex; flex-direction: column; }
.city-list.view-grid .city-artist-card { margin: 0; }

/* ══════════════════════════════════════════════════════════
   TARJETA DE ENTIDAD (.ec) — imagen primero, uniforme.
   Grid = columnas; Lista = filas compactas. Rediseño Fase F.
   ══════════════════════════════════════════════════════════ */
.ec {
    background: var(--carbon);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    /* overflow:clip recorta visualmente (igual que hidden) pero NO crea contexto de scroll,
       así los carruseles hijos (.ec__styles) siguen siendo scrollables en iOS. */
    overflow: clip;
    /* min-width:0 es imprescindible en CSS Grid: sin él, los items no se encogen
       por debajo del ancho de su contenido (e.g. los chips de estilos) y el
       segundo item de la fila sale del viewport. */
    min-width: 0;
    transition: border-color .15s, transform .15s;
}
.ec:hover { border-color: rgba(255,255,255,.25); transform: translateY(-2px); }
.ec--oro { border-color: rgba(255,231,48,.5); }
.ec--oro:hover { border-color: rgba(255,231,48,.85); }
.ec--plata { border-color: rgba(255,255,255,.16); }

/* La imagen se recorta aquí (solo esquinas superiores, las inferiores las tiene el body) */
.ec__media {
    display:block; position:relative; aspect-ratio: 4 / 5;
    background: var(--carbon-medio); overflow:hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.ec__media img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.ec:hover .ec__media img { transform: scale(1.04); }
.ec__init { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--f-display); font-size:46px; font-weight:800; color:var(--carbon-max); }

.ec__agenda { position:absolute; top:10px; left:10px; width:11px; height:11px; border-radius:50%; box-shadow: 0 0 0 2px rgba(0,0,0,.5); }
.ec__agenda--open { background: var(--verde-agenda); }
.ec__agenda--waitlist { background:#C8A45C; }
.ec__agenda--closed { background: var(--gris-meta); }

.ec__badge {
    position:absolute; top:8px; right:8px;
    font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:var(--negro-tinta); background:var(--verde-marca);
    padding:3px 8px; border-radius:var(--radius-pill);
}

.ec__body { padding: 12px 14px; }
.ec__name { display:block; font-family:var(--f-display); font-weight:700; font-size:16px; color:var(--hueso); text-decoration:none; line-height:1.2; }
.ec__name:hover { color:var(--verde-marca); }
.ec__verif { color: var(--verde-agenda); font-size:12px; }
.ec__meta { color:var(--gris-meta); font-size:13px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Cuerpo Oro y Plata: flex column para anclar el contenido al fondo */
.ec--oro, .ec--plata { display: flex; flex-direction: column; }
.ec--oro .ec__body, .ec--plata .ec__body { flex: 1; display: flex; flex-direction: column; }
/* Plata: etiqueta de agenda anclada al fondo (margin-top: auto empuja hacia abajo) */
.ec--plata .ec__agenda-label { margin-top: auto; }

/* ── GRID: Oro muestra la agenda arriba a la derecha, inline con el nombre ── */
.city-list.view-grid .ec--oro .ec__body { position: relative; }
.city-list.view-grid .ec--oro .ec__head { padding-right: 92px; }
.city-list.view-grid .ec--oro .ec__agenda-label {
    position: absolute; top: 12px; right: 14px; margin-top: 0;
}
/* GRID: Bronce no muestra la etiqueta de agenda (basta el punto sobre la imagen) */
.city-list.view-grid .tier-zone--bronce .ec__agenda-label { display: none; }

/* Chips de estilos — carrusel horizontal (sin wrap), scroll si no caben */
.ec__styles {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
    gap: 4px;
    margin-top: 7px;
    width: 100%;
    padding-bottom: 2px;
    cursor: grab;
}
.ec__styles:active { cursor: grabbing; }
.ec__styles::-webkit-scrollbar { display: none; }
.ec__style-chip {
    flex-shrink: 0;
    font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--gris-meta); background: var(--carbon-alto);
    padding: 2px 8px; border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* ec__meta secundario (primer estilo en Plata/Bronce) */
.ec__meta--style { margin-top: 0; }

/* Etiqueta de agenda legible — Oro y Plata (Bronce solo tiene el punto sobre la imagen) */
.ec__agenda-label {
    display: inline-flex;
    align-items: center;
    align-self: flex-start; /* no se estira al 100% de ancho en el body flex-column */
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    margin-top: 8px;
    padding: 3px 9px 3px 6px;
    border-radius: var(--radius-pill);
}
.ec__agenda-label::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ec__agenda-label--open    { color: var(--verde-agenda); background: rgba(74,222,128,.12); }
.ec__agenda-label--open::before    { background: var(--verde-agenda); }
.ec__agenda-label--waitlist { color: #C8A45C; background: rgba(200,164,92,.12); }
.ec__agenda-label--waitlist::before { background: #C8A45C; }
.ec__agenda-label--closed  { color: var(--gris-meta); background: rgba(128,128,128,.10); }
.ec__agenda-label--closed::before  { background: var(--gris-meta); }

/* ══════════════════════════════════════════════════════════
   VISTA LISTA — fila horizontal que aprovecha TODO el ancho.
   Layout flex:  [foto] [nombre+ciudad ····fill····] [estilos] [agenda]
   El grupo nombre/ciudad (.ec__head) crece (flex:1) y empuja los
   estilos y la agenda al borde derecho — sin huecos muertos.
   ══════════════════════════════════════════════════════════ */
.city-list.view-lista { display: flex; flex-direction: column; }
.city-list.view-lista .tier-zone__grid { display: flex; flex-direction: column; gap: 8px; }

/* La tarjeta: foto fija a la izquierda + cuerpo. ALTURA FIJA — clave para que
   la imagen (object-fit:cover) no estire la fila. La altura por defecto (Plata)
   se redefine por tier abajo. */
.city-list.view-lista .ec {
    display: grid;
    grid-template-columns: 92px 1fr;
    position: relative;
    height: 92px;            /* FIJA, no min-height */
    overflow: hidden;
}
.city-list.view-lista .ec:hover { transform: none; }
.city-list.view-lista .ec:hover .ec__media img { transform: none; }
/* La foto ocupa toda la altura de la fila y recorta con cover */
.city-list.view-lista .ec__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
}
.city-list.view-lista .ec__media img { width: 100%; height: 100%; object-fit: cover; }
.city-list.view-lista .ec__badge { font-size: 9px; padding: 2px 6px; }

/* El cuerpo es una fila flex que reparte el espacio horizontal.
   flex-direction:row es IMPRESCINDIBLE: anula el column que .ec--oro/.ec--plata
   ponen en su regla base (si no, Oro/Plata apilan en vertical). */
.city-list.view-lista .ec__body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    height: 100%;
    overflow: hidden;
}

/* Grupo nombre + ciudad: crece para llenar el centro */
.city-list.view-lista .ec__head {
    flex: 1 1 auto;
    min-width: 0;            /* permite truncar nombres largos */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.city-list.view-lista .ec__name {
    font-size: 16px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.city-list.view-lista .ec__head .ec__meta {
    margin-top: 0;
    font-size: 12.5px;
}

/* Estilos: carrusel inline (Oro). align-items:center evita que los chips
   se estiren verticalmente; flex:0 1 auto para no forzar un ancho gigante. */
.city-list.view-lista .ec__styles {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    width: auto;             /* anula el width:100% de la base */
    max-width: 300px;
    margin-top: 0;
    min-width: 0;
}
.city-list.view-lista .ec__style-chip { align-self: center; }

/* Chip de estilo único (Plata/Bronce) — pill discreto */
.city-list.view-lista .ec__meta--style {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-top: 0;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--gris-meta);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    white-space: nowrap;
}

/* Agenda: anclada al borde derecho */
.city-list.view-lista .ec__agenda-label {
    position: static;
    transform: none; top: auto; right: auto;
    flex: 0 0 auto;
    margin: 0 0 0 auto;       /* margin-left:auto la empuja a la derecha */
    align-self: center;
    font-size: 11px;
    padding: 4px 11px;
    white-space: nowrap;
}

/* ── Jerarquía por tier en lista (altura + ancho de foto) ── */
/* Oro: fila más alta, foto grande, carrusel de estilos visible */
.city-list.view-lista .tier-zone--oro .ec   { grid-template-columns: 116px 1fr; height: 116px; }
.city-list.view-lista .tier-zone--oro .ec__name  { font-size: 18px; }

/* Plata: por defecto (92px) — no necesita override */

/* Bronce: fila más compacta, foto pequeña, nombre menor */
.city-list.view-lista .tier-zone--bronce .ec { grid-template-columns: 72px 1fr; height: 72px; }
.city-list.view-lista .tier-zone--bronce .ec__name  { font-size: 14px; }

/* ── Selector de imagen de ficha ── */
/* Aviso de calidad de imagen en el selector de ficha */
.card-pick__hint {
    font-size: 12px;
    color: var(--gris-meta);
    margin: 0 0 10px;
    line-height: 1.5;
}
.card-pick__hint--oro {
    background: rgba(255,231,48,.08);
    border: 1px solid rgba(255,231,48,.3);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--hueso);
}
.card-pick__hint--oro strong { color: var(--verde-marca); }

.card-pick { display:flex; flex-wrap:wrap; gap:10px; }
.card-pick__opt { position:relative; width:74px; height:92px; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; border:2px solid var(--glass-border); transition:border-color .15s; }
.card-pick__opt input { position:absolute; opacity:0; pointer-events:none; }
.card-pick__opt img { width:100%; height:100%; object-fit:cover; display:block; }
.card-pick__opt.sel, .card-pick__opt:has(input:checked) { border-color: var(--verde-marca); }
.card-pick__auto { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; background:var(--carbon-alto); color:var(--hueso); font-size:13px; font-weight:600; text-align:center; gap:2px; }
.card-pick__auto small { color:var(--gris-meta); font-size:10px; font-weight:400; }
.card-pick__tag { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.6); color:var(--hueso); font-size:9px; text-align:center; padding:2px; text-transform:uppercase; letter-spacing:.05em; }

/* ── Pasos de la sección Imágenes (admin/panel) ── */
.img-step { border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:16px 18px; margin-bottom:14px; background:var(--carbon); }
.img-step__head { display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:700; color:var(--hueso); font-size:16px; margin-bottom:6px; }
.img-step__num { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--verde-marca); color:var(--negro-tinta); font-size:13px; font-weight:800; }

/* ── Galería de cabeceras predefinidas ── */
.hero-presets { display:flex; flex-wrap:wrap; gap:8px; }
.hero-presets__opt { position:relative; width:140px; height:52px; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; border:2px solid var(--glass-border); transition:border-color .15s; }
.hero-presets__opt input { position:absolute; opacity:0; pointer-events:none; }
.hero-presets__opt img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-presets__opt.sel, .hero-presets__opt:has(input:checked) { border-color: var(--verde-marca); }

/* ── Botón de la galería (era div) ── */
button.portfolio-bento__item { border:none; padding:0; background:none; font:inherit; cursor:pointer; display:block; width:100%; }

/* ── Lightbox del portfolio ── */
.lightbox {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(4,5,5,0.94);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
    max-width: 92vw; max-height: 88vh; object-fit: contain;
    border-radius: var(--radius-sm); box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.lightbox__close {
    position: absolute; top: 18px; right: 22px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.08); border: none; color: var(--hueso);
    font-size: 20px; cursor: pointer;
}
.lightbox__close:hover { background: rgba(255,255,255,.16); }
.lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,.07); border: none; color: var(--hueso);
    font-size: 30px; line-height: 1; cursor: pointer;
}
.lightbox__nav:hover { background: rgba(255,255,255,.16); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
@media (max-width: 640px) { .lightbox__nav { width:42px; height:42px; font-size:24px; } }

/* ── Ubicación / mapa del perfil de artista ── */
.artist-locsec { margin-bottom: 48px; }
.artist-locsec__addr { display:flex; align-items:center; gap:8px; color:var(--gris-meta); margin:8px 0 14px; }
/* Mapa más contenido en escritorio: 210px de alto, botón "cómo llegar" inline */
.artist-map { width:100%; height:210px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--glass-border); background:var(--carbon); }
.artist-map .leaflet-control-zoom a { background:var(--carbon-alto); color:var(--hueso); border-color:var(--glass-border); }
.artist-locsec__dir { display:inline-flex; align-items:center; gap:6px; margin-top:12px; width:auto; }

/* ── Portfolio masonry: ancho de columna fijo, proporción natural, sin recorte ── */
.portfolio-masonry { column-width: 250px; column-gap: 14px; }
.pm-item {
    display: block; width: 100%; margin: 0 0 14px; padding: 0;
    border: none; background: none; cursor: pointer;
    break-inside: avoid; -webkit-column-break-inside: avoid;
    position: relative; overflow: hidden; border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
}
.pm-item img { width: 100%; height: auto; display: block; transition: transform .5s var(--ease); }
.pm-item:hover img { transform: scale(1.04); }
.pm-item__tag {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 18px 12px 8px; font-size: 11px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--hueso);
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
    opacity: 0; transition: opacity .2s; text-align: left;
}
.pm-item:hover .pm-item__tag { opacity: 1; }
@media (max-width: 700px) { .portfolio-masonry { column-width: 160px; column-gap: 10px; } .pm-item { margin-bottom: 10px; } }

/* Logo de estudio sin cover — centrado sobre fondo oscuro */
.ec__logo-bg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--carbon-bajo);
    padding: 20px;
}
.ec__logo-bg img { max-width: 70%; max-height: 70%; object-fit: contain; }

/* ══════════════════════════════════════════════════════════
   ZONAS DE TIER — cada zona tiene su propio grid.
   La jerarquía visual ES la monetización:
     Oro    → 2 por fila, imagen landscape 3:2 (grande)
     Plata  → 3 por fila, portrait 4:5 (estándar)
     Bronce → auto-fill ~170px, portrait 4:5 (compacto)
   En móvil: Oro = full-width hero; Plata = 2 cols; Bronce = 3 cols.
   ══════════════════════════════════════════════════════════ */

/* Contenedor de zona */
.tier-zone { display: flex; flex-direction: column; }

/* Grid interno de cada zona (modo cuadrícula) */
.tier-zone__grid { display: grid; gap: 14px; padding-bottom: 20px; }

/* Oro: 2 tarjetas por fila, imagen apaisada — premium */
.city-list.view-grid .tier-zone--oro .tier-zone__grid  { grid-template-columns: repeat(2, 1fr); }
.city-list.view-grid .tier-zone--oro .ec__media         { aspect-ratio: 3 / 2; }

/* Plata: 3 tarjetas por fila, portrait estándar */
.city-list.view-grid .tier-zone--plata .tier-zone__grid { grid-template-columns: repeat(3, 1fr); }
.city-list.view-grid .tier-zone--plata .ec__media        { aspect-ratio: 4 / 5; }

/* Bronce: muchas tarjetas compactas por fila */
.city-list.view-grid .tier-zone--bronce .tier-zone__grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.city-list.view-grid .tier-zone--bronce .ec__media        { aspect-ratio: 4 / 5; }

/* Responsive: tablet (≤900px) */
@media (max-width: 900px) {
    .city-list.view-grid .tier-zone--plata .tier-zone__grid  { grid-template-columns: repeat(2, 1fr); }
    .city-list.view-grid .tier-zone--bronce .tier-zone__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Responsive: móvil (≤600px)
   Oro = 2 por fila portrait (grande pero justo con los demás).
   Plata = 3 por fila portrait. Bronce = 4 por fila square (compact tiles).  */
@media (max-width: 600px) {
    .city-list.view-grid .tier-zone--oro .tier-zone__grid    { grid-template-columns: repeat(2, 1fr); }
    .city-list.view-grid .tier-zone--oro .ec__media           { aspect-ratio: 4 / 5; } /* portrait en móvil */
    /* Oro mobile: la tarjeta es estrecha → agenda vuelve al flujo (debajo del nombre),
       sin posición absoluta ni padding-right que apretarían el texto. */
    .city-list.view-grid .tier-zone--oro .ec__head            { padding-right: 0; }
    .city-list.view-grid .tier-zone--oro .ec__agenda-label    { position: static; top: auto; right: auto; margin-top: 7px; }
    .city-list.view-grid .tier-zone--plata .tier-zone__grid  { grid-template-columns: repeat(3, 1fr); }
    .city-list.view-grid .tier-zone--bronce .tier-zone__grid { grid-template-columns: repeat(4, 1fr); }
    .city-list.view-grid .tier-zone--bronce .ec__media        { aspect-ratio: 1 / 1; }
    /* Bronce mobile compact: texto más pequeño para que quepa en tarjeta estrecha */
    .city-list.view-grid .tier-zone--bronce .ec__name  { font-size: 11px; }
    .city-list.view-grid .tier-zone--bronce .ec__meta  { font-size: 10px; }
    .city-list.view-grid .tier-zone--bronce .ec__body  { padding: 6px 8px; }

    /* Vista LISTA en móvil: los estilos (carrusel/chip) se ocultan para no apretar;
       quedan nombre + ciudad + agenda, que es lo esencial en pantalla estrecha. */
    .city-list.view-lista .ec__body { gap: 10px; padding: 9px 12px; }
    .city-list.view-lista .ec__styles { display: none; }
    .city-list.view-lista .ec__meta--style { display: none; }
    .city-list.view-lista .ec__name { font-size: 14px; }

    /* Mapa más bajo en móvil: deja espacio para hacer scroll alrededor */
    #city-map { height: 340px !important; }
}

/* ── SEPARADOR DE ZONA (tier-break) ──
   Cabecera de sección editorial. Slot natural para futuros banners del CMS. */
.tier-break {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 2px 12px;
    border-bottom: 1px solid var(--glass-border);
    margin-top: 16px;
}
.tier-zone:first-child .tier-break { margin-top: 0; }

.tier-break__label {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--gris-meta);
}
.tier-break--oro .tier-break__label   { color: var(--verde-marca); }
.tier-break--plata .tier-break__label { color: var(--hueso); opacity: .75; }

.tier-break__cta {
    margin-left: auto;
    font-size: 12px;
    color: var(--gris-meta);
    text-decoration: none;
    transition: color .15s;
    white-space: nowrap;
}
.tier-break__cta:hover { color: var(--verde-marca); }

/* ══════════════════════════════════════════════════════════
   CABECERA SLIM — header sin chips (solo H1 + stats)
   Los chips están ahora en el filter-bar de abajo.
   ══════════════════════════════════════════════════════════ */
.city-header__inner--slim {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Fila stats + botón mapa — en línea en desktop, apilados en mobile */
.city-header__stats-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.city-header__stats-row p { margin: 0; }

/* Botón "Ver mapa" — discret pero visible */
.city-header__map-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gris-meta);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    text-decoration: none;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.city-header__map-btn:hover {
    color: var(--verde-marca);
    border-color: rgba(255,231,48,.4);
}

/* ══════════════════════════════════════════════════════════
   BARRA DE FILTROS (filter-bar)
   Sticky debajo de la nav. Dos carruseles: ciudades + estilos.
   Ocupa ~72px en total — sin bloquear las tarjetas grandes.
   ══════════════════════════════════════════════════════════ */
.filter-bar {
    position: sticky;
    top: 72px;
    z-index: 35;
    background: rgba(8, 9, 9, .94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
}

.filter-bar__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px var(--margin-desk);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.filter-bar__row:last-child { border-bottom: none; }

/* Etiqueta de contexto: "Ciudades" / "Estilos" — fija a la izquierda */
.filter-bar__label {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris-meta);
    white-space: nowrap;
    opacity: .7;
}

.filter-bar__scroll {
    display: flex;
    gap: 6px;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
    align-items: center;
    padding-bottom: 1px;
    flex: 1;
    /* cursor grab indica que es arrastrable en desktop */
    cursor: grab;
}
.filter-bar__scroll:active { cursor: grabbing; }
.filter-bar__scroll::-webkit-scrollbar { display: none; }

/* Chips de filtro */
.filter-chip {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border);
    color: var(--gris-meta);
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
    white-space: nowrap;
}
.filter-chip:hover  { color: var(--hueso); border-color: rgba(255,255,255,.25); }
.filter-chip.activo {
    color: var(--negro-tinta);
    background: var(--verde-marca);
    border-color: var(--verde-marca);
}

/* Chips de estilo — fila secundaria, algo más finos */
.filter-chip--style { font-size: 11px; padding: 4px 11px; }
.filter-chip__count { font-size: 10px; opacity: .65; margin-left: 3px; }

/* Chips de comunidad autónoma — fila superior, borde distinto para diferenciarla */
.filter-chip--region { border-color: rgba(255,231,48,.35); }
.filter-chip--region:hover { border-color: var(--verde-marca); }

@media (max-width: 640px) {
    .filter-bar__row { padding: 6px var(--margin-mob); gap: 7px; }
    .filter-bar__label { font-size: 9px; }
}

/* ══ RESEÑAS + TATTOOSCORE (Fase G) ═══════════════════════════════════════ */

/* Bloque de reseñas en el perfil */
.reviews-block {
    margin-top: var(--stack-lg);
    padding-top: var(--stack-lg);
    border-top: 1px solid var(--glass-border);
}
.reviews-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.reviews-block__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Resumen de puntuación (media + estrellas) */
.score-summary {
    display: flex;
    align-items: center;
    gap: 6px;
}
.score-summary__avg {
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--hueso);
}
.score-summary__count { font-size: 13px; color: var(--gris-meta); }

/* Estrellas */
.star { color: var(--gris-meta); font-size: 14px; }
.star--on { color: var(--verde-marca); }

/* TattooScore badge */
.tattoo-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.tattoo-score__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris-meta);
}
.tattoo-score__value {
    font-family: var(--f-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--hueso);
    line-height: 1;
}
.tattoo-score__value--silver { color: #B8C0CC; }
.tattoo-score__value--gold   { color: var(--verde-marca); }

/* Lista de tarjetas de reseña */
.reviews-list { display: flex; flex-direction: column; gap: 16px; }

.review-card {
    background: var(--carbon);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
}
.review-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.review-card__author-wrap { display: flex; align-items: center; gap: 10px; }
.review-card__avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--carbon-alto);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--f-display); font-weight: 700; font-size: 16px;
    color: var(--gris-meta);
    flex-shrink: 0;
}
.review-card__author { font-weight: 600; font-size: 15px; color: var(--hueso); }
.review-card__date   { font-size: 12px; color: var(--gris-meta); margin-top: 1px; }
.review-card__verified { color: var(--verde-agenda); font-size: 12px; margin-left: 4px; }
.review-card__comment  { font-size: 14px; color: var(--hueso); line-height: 1.6; }
.review-card__photo  { margin-top: 12px; }
.review-card__photo img { max-width: 200px; border-radius: var(--radius-sm); object-fit: cover; }

/* Formulario de envío de reseña */
.review-form-wrap { margin-top: 28px; }
.review-form__toggle {
    display: flex; align-items: center; gap: 8px;
    background: none; border: 1px solid var(--glass-border);
    color: var(--hueso); font-size: 14px; font-weight: 600;
    padding: 10px 18px; border-radius: var(--radius-sm); cursor: pointer;
    transition: border-color .15s, color .15s;
}
.review-form__toggle:hover { border-color: var(--verde-marca); color: var(--verde-marca); }

.review-form {
    margin-top: 16px;
    background: var(--carbon);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 22px;
}
.review-form__field  { margin-bottom: 18px; }
.review-form__label  { display: block; font-size: 13px; font-weight: 600; color: var(--gris-meta); margin-bottom: 6px; }
.review-form__input  {
    width: 100%; background: var(--carbon-alto); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); color: var(--hueso); font-size: 14px; font-family: var(--f-body);
    padding: 10px 14px; transition: border-color .15s; box-sizing: border-box;
}
.review-form__input:focus { outline: none; border-color: var(--verde-marca); }
.review-form__textarea { resize: vertical; min-height: 90px; }
.review-form__file     { background: var(--carbon-alto); }
.review-form__footer   { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.review-form__note     { font-size: 12px; color: var(--gris-meta); max-width: 420px; line-height: 1.5; }
.review-form__submit   { padding: 12px 22px; font-size: 14px; }
.review-form__thanks   { margin-top: 16px; color: var(--verde-agenda); font-weight: 600; }

/* Star picker interactivo */
.star-picker { display: flex; gap: 4px; }
.star-picker__label { cursor: pointer; }
.star-picker__star  { font-size: 26px; color: var(--gris-meta); transition: color .1s; }
.star-picker__star.star--on { color: var(--verde-marca); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ══ RANKING / LEADERBOARD ════════════════════════════════════════════════ */

.ranking-hero {
    position: relative;
    overflow: hidden;
    background: var(--negro-tinta);
    padding: 48px 0 40px;
    /* Sin border-bottom: se disuelve en el negro de la página (ver __overlay) */
    display: flex;
    align-items: center;
    /* Casi tan alto como el hero del home — se ve la foto entera */
    min-height: clamp(560px, 85vh, 920px);
}
.ranking-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}
.ranking-hero__overlay {
    position: absolute;
    inset: 0;
    /* Oscuro a la izquierda (texto) y más claro a la derecha (imagen), como el hub. */
    background:
        linear-gradient(to right, rgba(8,9,9,0.94) 0%, rgba(8,9,9,0.7) 40%, rgba(8,9,9,0.3) 72%, rgba(8,9,9,0.08) 100%),
        linear-gradient(to top, rgba(8,9,9,0.96) 0%, rgba(8,9,9,0.35) 55%, transparent 100%);
}
.ranking-hero__inner { position: relative; z-index: 1; width: 100%; }
.ranking-hero__title {
    margin: 12px 0 10px;
    color: var(--hueso);
}
.ranking-hero__lead {
    color: var(--gris-meta);
    font-size: 15px;
    max-width: 620px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.ranking-hero__filters {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.ranking-hero__filter-chip {
    font-size: 13px; font-weight: 600; padding: 6px 16px;
    background: var(--carbon); border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill); color: var(--hueso); text-decoration: none;
    transition: border-color .15s, color .15s;
}
.ranking-hero__filter-chip:hover { border-color: var(--verde-marca); color: var(--verde-marca); }

/* Podio top 3 */
.ranking-podio { padding-top: var(--stack-lg); }
.podio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: end;
}
.podio__item {
    background: var(--carbon);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 24px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform .15s;
    text-decoration: none;
    color: inherit;
}
.podio__item:hover { transform: translateY(-2px); }
.podio__item--gold   { border-color: rgba(255,231,48,.5); padding-top: 32px; }
.podio__item--silver { border-color: rgba(184,192,204,.3); }
.podio__item--bronze { border-color: var(--glass-border); }

.podio__avatar {
    position: relative;
    width: 80px; height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--carbon-alto);
}
.podio__item--gold   .podio__avatar { width: 96px; height: 96px; }
.podio__avatar img { width: 100%; height: 100%; object-fit: cover; }
.podio__avatar-init { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 32px; font-weight: 800; color: var(--gris-meta); }
.podio__pos {
    position: absolute; bottom: -4px; right: -4px;
    width: 24px; height: 24px;
    background: var(--carbon-alto); border: 1px solid var(--glass-border);
    border-radius: 50%; font-size: 11px; font-weight: 700; color: var(--hueso);
    display: flex; align-items: center; justify-content: center;
}
.podio__item--gold .podio__pos { background: var(--verde-marca); color: var(--negro-tinta); border-color: var(--verde-marca); }

.podio__name {
    font-family: var(--f-display); font-weight: 700; font-size: 15px;
    color: var(--hueso); text-decoration: none; line-height: 1.2;
}
.podio__name:hover { color: var(--verde-marca); }
.podio__city   { font-size: 12px; color: var(--gris-meta); }
.podio__score-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.podio__score-label { font-size: 10px; color: var(--gris-meta); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.podio__stars  { display: flex; align-items: center; gap: 1px; }

/* Lista ranking posiciones 4+ */
.ranking-list { display: flex; flex-direction: column; gap: 2px; }

.ranking-row {
    display: grid;
    grid-template-columns: 36px 48px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--carbon);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: border-color .15s, transform .1s;
}
.ranking-row:hover { border-color: rgba(255,255,255,.2); transform: translateX(2px); }

.ranking-row__pos  { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--gris-meta); text-align: center; }
.ranking-row__avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--carbon-alto); flex-shrink: 0; }
.ranking-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ranking-row__avatar-init { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 18px; font-weight: 800; color: var(--gris-meta); }
.ranking-row__name { font-weight: 600; font-size: 15px; color: var(--hueso); }
.ranking-row__meta { font-size: 12px; color: var(--gris-meta); margin-top: 1px; }
.ranking-row__stars { display: flex; align-items: center; gap: 3px; font-size: 13px; color: var(--hueso); flex-shrink: 0; }
.ranking-row__score { flex-shrink: 0; }

/* ══ ADMIN RESEÑAS ════════════════════════════════════════════════════════ */

.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-tab {
    padding: 7px 16px; font-size: 13px; font-weight: 600;
    background: var(--carbon); border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill); color: var(--hueso); text-decoration: none;
    transition: border-color .15s, color .15s;
}
.admin-tab:hover, .admin-tab--activo { border-color: var(--verde-marca); color: var(--verde-marca); }

.resena-row {
    padding: 18px 20px;
    border-bottom: 1px solid var(--glass-border);
}
.resena-row:last-child { border-bottom: none; }
.resena-row__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.resena-row__author { font-weight: 600; font-size: 14px; color: var(--hueso); }
.resena-row__meta   { font-size: 12px; color: var(--gris-meta); margin-top: 2px; }
.resena-row__meta a { color: var(--verde-marca); }
.resena-row__comment { font-size: 14px; color: var(--hueso); line-height: 1.6; margin-bottom: 10px; }
.resena-row__stars  { display: flex; gap: 2px; flex-shrink: 0; }
.resena-row__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.resena-row__photo img { max-width: 120px; border-radius: var(--radius-sm); margin-top: 8px; }

.resena-row__status {
    display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-pill);
    margin-left: 8px;
}
.resena-row__status--pending  { background: rgba(200,164,92,.15); color: #C8A45C; }
.resena-row__status--approved { background: rgba(100,200,100,.12); color: var(--verde-agenda); }
.resena-row__status--rejected { background: rgba(224,31,45,.12);  color: var(--rojo-accion); }

@media (max-width: 640px) {
    /* En móvil el podio se apila: forzar el orden real 1º · 2º · 3º
       (en escritorio el DOM va 2º·1º·3º para el efecto de podio centrado). */
    .podio { grid-template-columns: 1fr; }
    .podio__item--gold   { order: 1; padding-top: 24px; }
    .podio__item--silver { order: 2; }
    .podio__item--bronze { order: 3; }
    .ranking-row { grid-template-columns: 32px 40px 1fr auto; }
    .ranking-row__stars { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SISTEMA DE ARTÍCULOS / GUÍAS (/guias, /guias/{slug})
   ═══════════════════════════════════════════════════════════════ */

/* ── Tarjetas de artículo (grid del listado) ─────────────────── */
.grid-cards--articles { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.article-card {
    display: flex; flex-direction: column;
    background: var(--superficie); border-radius: var(--radius-md);
    overflow: hidden; text-decoration: none; color: inherit;
    border: 1px solid rgba(255,255,255,.07);
    transition: transform .18s ease, border-color .18s ease;
}
.article-card:hover { transform: translateY(-3px); border-color: var(--verde-marca); }

.article-card__img { aspect-ratio: 16/9; overflow: hidden; }
.article-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.article-card:hover .article-card__img img { transform: scale(1.04); }
.article-card__img--sm { aspect-ratio: 16/7; }

.article-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.article-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.article-card__tag {
    font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: 2px 8px; border-radius: var(--radius-pill);
    background: rgba(255,231,48,.12); color: var(--verde-marca);
}
.article-card__title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--hueso); }
.article-card__excerpt { font-size: .85rem; color: var(--gris-meta); line-height: 1.55; flex: 1; }
.article-card__meta { display: flex; align-items: center; gap: .5rem; font-size: .73rem; color: var(--gris-meta); margin-top: auto; padding-top: .5rem; }
.article-card__meta-sep { opacity: .35; }
.article-card__arrow { padding: .75rem 1.25rem; font-size: 1rem; color: var(--verde-marca); border-top: 1px solid rgba(255,255,255,.06); }

/* ── Artículo destacado (primer resultado del listado) ───────── */
.article-featured {
    display: grid; grid-template-columns: 1fr 1fr;
    background: rgba(255,255,255,.03); border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2.5rem;
    text-decoration: none; color: inherit; transition: border-color .2s;
}
.article-featured:hover { border-color: var(--verde-marca); }
.article-featured__img { overflow: hidden; }
.article-featured__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; min-height: 300px; }
.article-featured:hover .article-featured__img img { transform: scale(1.04); }
.article-featured__body { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; gap: .85rem; }
.article-featured__kicker { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-marca); font-weight: 700; }
.article-featured__title { font-family: var(--font-display); font-size: 1.65rem; font-weight: 800; line-height: 1.2; }
.article-featured__excerpt { color: var(--gris-meta); font-size: .9rem; line-height: 1.65; }
.article-featured__meta { font-size: .75rem; color: var(--gris-meta); display: flex; align-items: center; gap: .5rem; }
.article-featured__cta { display: inline-flex; align-items: center; gap: .4rem; color: var(--rojo-accion); font-size: .9rem; font-weight: 700; margin-top: .25rem; }

/* ── Hero del artículo ───────────────────────────────────────── */
.article-hero { position: relative; height: clamp(240px, 38vw, 500px); overflow: hidden; background: var(--negro-tinta); }
.article-hero__img { width: 100%; height: 100%; object-fit: cover; }
/* Antes usaba var(--negro), una variable que no existe en :root — el
   degradado no se aplicaba nunca. Corregido a --negro-tinta (negro real
   de la página). */
.article-hero__grad { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--negro-tinta) 100%); }

/* ── Layout 2 columnas: artículo + sidebar ───────────────────── */
.article-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 5rem;
    align-items: start;
}
.article-layout__sidebar {
    position: sticky; top: 88px;
    display: flex; flex-direction: column; gap: 1.1rem;
}

/* ── Meta (fecha + tiempo de lectura) ────────────────────────── */
.article-meta {
    display: flex; align-items: center; gap: .75rem;
    font-size: .8rem; color: var(--gris-meta); margin-bottom: 1.75rem;
    flex-wrap: wrap;
}
.article-meta__sep { opacity: .35; }

/* ── TOC (tabla de contenidos) ───────────────────────────────── */
.article-toc {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    margin-bottom: 2rem;
}
.article-toc__title { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-meta); margin-bottom: .65rem; font-weight: 700; }
.article-toc__list { list-style: none; display: flex; flex-direction: column; gap: .2rem; }
.article-toc__list a { display: block; padding: .3rem .4rem; color: var(--gris-meta); font-size: .85rem; text-decoration: none; border-radius: 4px; transition: all .15s; border-left: 2px solid transparent; }
.article-toc__list a:hover { color: var(--hueso); background: rgba(255,255,255,.04); border-left-color: var(--verde-marca); }
.article-toc__list a.toc-active { color: var(--verde-marca); border-left-color: var(--verde-marca); background: rgba(255,231,48,.05); }

/* ── Excerpt destacado ────────────────────────────────────────── */
.article-body__excerpt {
    font-size: 1.1rem; line-height: 1.7; color: var(--gris-meta);
    border-left: 3px solid var(--verde-marca); padding-left: 1rem;
    margin-bottom: 2rem;
}

/* ── Prose: tipografía del CMS ───────────────────────────────── */
.prose { font-size: 1rem; line-height: 1.8; color: var(--hueso); }
.prose h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin: 2.25rem 0 .75rem; scroll-margin-top: 100px; }
.prose h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin: 1.75rem 0 .5rem; }
.prose p  { margin-bottom: 1.3rem; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1.3rem; }
.prose li { margin-bottom: .45rem; }
.prose strong { font-weight: 700; color: var(--hueso); }
.prose a { color: var(--verde-marca); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { text-decoration: none; }
.prose blockquote { border-left: 3px solid var(--verde-marca); padding-left: 1rem; color: var(--gris-meta); font-style: italic; margin: 1.75rem 0; }
.prose img { max-width: 100%; border-radius: var(--radius-sm); margin: 1.25rem 0; }
.prose hr { border: none; border-top: 1px solid rgba(255,255,255,.1); margin: 2.5rem 0; }

/* ── CTA inline (a mitad del artículo) ───────────────────────── */
.article-cta-inline {
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(224,31,45,.14) 0%, rgba(255,231,48,.06) 100%);
    border: 1px solid rgba(224,31,45,.3);
    border-radius: var(--radius-md);
    padding: 1.4rem 1.75rem;
    margin: 2.5rem 0;
}
.article-cta-inline__copy { }
.article-cta-inline__title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.article-cta-inline__sub { font-size: .82rem; color: var(--gris-meta); margin-top: .2rem; }

/* ── Etiquetas (tags) al pie del artículo ────────────────────── */
.article-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.07); }
.article-tag {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .35rem .8rem; background: rgba(255,255,255,.04);
    border: 1px solid var(--glass-border); border-radius: 999px;
    font-size: .8rem; color: var(--gris-meta); text-decoration: none; transition: all .2s;
}
.article-tag:hover { background: rgba(255,231,48,.08); border-color: var(--verde-marca); color: var(--verde-marca); }

/* ── Botones de compartir ────────────────────────────────────── */
.article-share { display: flex; align-items: center; gap: .65rem; margin-top: 1.25rem; }
.article-share__label { font-size: .78rem; color: var(--gris-meta); }
.article-share__btn {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.05); border: 1px solid var(--glass-border);
    color: var(--hueso); text-decoration: none; font-size: .8rem;
    transition: all .18s;
}
.article-share__btn:hover { background: rgba(255,231,48,.12); border-color: var(--verde-marca); color: var(--verde-marca); }

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.sidebar-cta {
    background: linear-gradient(160deg, rgba(224,31,45,.2) 0%, rgba(224,31,45,.06) 100%);
    border: 1px solid rgba(224,31,45,.35);
    border-radius: var(--radius-md); padding: 1.4rem;
}
.sidebar-cta__title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; margin-bottom: .45rem; }
.sidebar-cta__desc { font-size: .83rem; color: var(--gris-meta); line-height: 1.55; margin-bottom: 1.1rem; }

.sidebar-section {
    background: rgba(255,255,255,.025);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); padding: 1.15rem;
}
.sidebar-section__title { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-meta); margin-bottom: .8rem; font-weight: 700; }

/* Lista de artículos recientes en sidebar */
.sidebar-latest { list-style: none; display: flex; flex-direction: column; }
.sidebar-latest li a {
    display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .4rem;
    border-radius: var(--radius-sm); text-decoration: none; color: var(--hueso);
    font-size: .83rem; line-height: 1.4; transition: background .15s;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.sidebar-latest li:last-child a { border-bottom: none; }
.sidebar-latest li a:hover { background: rgba(255,255,255,.04); }
.sidebar-latest__arrow { color: var(--verde-marca); font-size: .75rem; flex-shrink: 0; margin-top: .15rem; }

/* Links de ciudades/estilos en sidebar */
.sidebar-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .1rem; }
.sidebar-pill {
    padding: .28rem .65rem; background: rgba(255,255,255,.04);
    border: 1px solid var(--glass-border); border-radius: 999px;
    font-size: .77rem; color: var(--gris-meta); text-decoration: none; transition: all .18s;
}
.sidebar-pill:hover { background: rgba(255,231,48,.08); border-color: var(--verde-marca); color: var(--verde-marca); }

/* Caja contextual (ciudad/estilo del artículo) */
.sidebar-contextual {
    background: rgba(255,231,48,.06);
    border: 1px solid rgba(255,231,48,.2);
    border-radius: var(--radius-md); padding: 1.15rem;
}
.sidebar-contextual__label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--verde-marca); margin-bottom: .5rem; font-weight: 700; }
.sidebar-contextual__link { display: block; font-size: .9rem; font-weight: 700; color: var(--hueso); text-decoration: none; margin-bottom: .35rem; }
.sidebar-contextual__link:hover { color: var(--verde-marca); }
.sidebar-contextual__sub { font-size: .8rem; color: var(--gris-meta); }

/* ── Artículos relacionados ───────────────────────────────────── */
.related-articles { padding: 3rem 0; border-top: 1px solid rgba(255,255,255,.07); margin-top: 1rem; }
.related-articles__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 1.5rem; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .article-layout { grid-template-columns: 1fr; padding: 1.5rem 1rem 4rem; gap: 2rem; }
    .article-layout__sidebar { position: static; }
    /* Sidebar sube al principio en móvil: CTA y contextual visibles, resto colapsado */
    .sidebar-hide-mobile { display: none; }
}
@media (max-width: 640px) {
    .article-featured { grid-template-columns: 1fr; }
    .article-featured__img img { min-height: 200px; }
    .article-featured__body { padding: 1.5rem; }
    .article-featured__title { font-size: 1.3rem; }
    .grid-cards--articles { grid-template-columns: 1fr; }
    .article-cta-inline { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   BARRA CTA MÓVIL (perfil de artista y estudio)
   Fija abajo en móvil/tablet: el "Pedir cita" siempre visible → CRO.
   Botón propio (NO .btn-rojo, que lleva width:100% y rompía el layout).
   ═══════════════════════════════════════════════════════════════ */
.mobile-cta-bar { display: none; }
.mobile-cta-spacer { display: none; }

@media (max-width: 1024px) {
    .mobile-cta-bar {
        display: flex; align-items: center; gap: 14px;
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(10,12,12,.92);
        backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
        border-top: 1px solid var(--glass-border);
        box-shadow: 0 -8px 32px rgba(0,0,0,.5);
    }
    .mobile-cta-bar__info {
        flex: 1 1 auto; min-width: 0;
        display: flex; flex-direction: column; gap: 2px;
    }
    .mobile-cta-bar__status {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 13px; font-weight: 600; color: var(--hueso);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mobile-cta-bar__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .mobile-cta-bar__dot--open { background: #36d399; box-shadow: 0 0 0 3px rgba(54,211,153,.18); }
    .mobile-cta-bar__dot--wait { background: var(--verde-marca); }
    .mobile-cta-bar__dot--shut { background: var(--gris-meta); }
    .mobile-cta-bar__hint {
        font-size: 12px; color: var(--gris-meta);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Botón propio, compacto, no se encoge */
    .mobile-cta-bar__btn {
        flex: 0 0 auto;
        display: inline-flex; align-items: center; gap: 7px;
        padding: 13px 22px; border: none; cursor: pointer;
        font-family: var(--f-body); font-size: 14px; font-weight: 700;
        letter-spacing: .02em; text-transform: none; white-space: nowrap;
        color: #fff; background: var(--rojo-accion);
        border-radius: var(--radius-md);
        box-shadow: 0 4px 14px rgba(215,0,0,.35);
        transition: transform .15s var(--ease), box-shadow .15s;
        text-decoration: none;
    }
    .mobile-cta-bar__btn:active { transform: scale(.97); }
    .mobile-cta-bar__btn .arrow { transition: transform var(--dur) var(--ease); }
    /* Hueco para que la barra fija no tape el final del contenido */
    .mobile-cta-spacer { display: block; height: 80px; }
}

/* ═══════════════════════════════════════════════════════════════
   PEDIR CITA EN ESTUDIO (studio.php)
   ═══════════════════════════════════════════════════════════════ */
.studio-booking { padding: var(--stack-md) 0; }
.studio-booking__card {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
    max-width: var(--max-w); margin: 0 auto;
    background: rgba(20,22,22,.6);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-md);
}
/* Lado izquierdo: argumentario de confianza */
.studio-booking__pitch {
    padding: var(--stack-md);
    background: linear-gradient(150deg, rgba(224,31,45,.12) 0%, rgba(255,231,48,.04) 100%);
    border-right: 1px solid var(--glass-border);
}
.studio-booking__pitch h2 { margin-bottom: 10px; }
.studio-booking__pitch p { color: var(--gris-meta); font-size: var(--t-body-md); line-height: 1.55; margin-bottom: 18px; }
.studio-booking__perks { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.studio-booking__perk { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-body-md); color: rgba(226,226,226,.85); }
.studio-booking__perk .ico {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px;
    background: rgba(255,231,48,.14); color: var(--verde-marca);
}
/* Lado derecho: panel de arranque del formulario por pasos */
.studio-booking__start {
    display: grid; place-items: center;
    padding: var(--stack-md);
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(224,31,45,.10) 0%, transparent 60%),
        rgba(0,0,0,.18);
}
.studio-booking__start-inner { text-align: center; max-width: 320px; width: 100%; }
.studio-booking__start-eyebrow {
    display: inline-block; margin-bottom: 12px; padding: 5px 12px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--verde-marca); background: rgba(255,231,48,.1);
    border: 1px solid rgba(255,231,48,.22); border-radius: var(--radius-pill);
}
.studio-booking__start-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; line-height: 1.2; margin-bottom: 8px; }
.studio-booking__start-sub { color: var(--gris-meta); font-size: var(--t-body-md); margin-bottom: 22px; }

/* ── Mapa del estudio (reutiliza estética del de artista) ── */
.studio-map { width:100%; height:260px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--glass-border); background:var(--carbon); }
.studio-map .leaflet-control-zoom a { background:var(--carbon-alto); color:var(--hueso); border-color:var(--glass-border); }
.studio-locsec__addr { display:flex; align-items:center; gap:8px; color:var(--gris-meta); margin:8px 0 14px; }

/* ── Botón "pedir cita" en la tarjeta de artista del estudio ── */
.city-artist-card__cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 12px; padding: 8px 16px;
    background: rgba(224,31,45,.12); border: 1px solid rgba(224,31,45,.3);
    border-radius: var(--radius-pill); color: var(--rojo-accion);
    font-size: 13px; font-weight: 700; text-decoration: none; transition: all .18s;
}
.city-artist-card__cta:hover { background: var(--rojo-accion); color: #fff; }

@media (max-width: 768px) {
    .studio-booking__card { grid-template-columns: 1fr; }
    .studio-booking__pitch { border-right: none; border-bottom: 1px solid var(--glass-border); }
}

/* ═══════════════════════════════════════════════════════════════
   INTRO DE ESTILO (style.php) — párrafo introductorio SEO
   ═══════════════════════════════════════════════════════════════ */
.style-intro { padding: var(--stack-md) 0 0; }
.style-intro__lead {
    max-width: 70ch; font-size: var(--t-body-lg); line-height: 1.7;
    color: rgba(226,226,226,.82);
}

/* ═══════════════════════════════════════════════════════════════
   PERFIL DE ESTUDIO — reputación, ranking interno, reseñas, mapa 2col
   ═══════════════════════════════════════════════════════════════ */

/* Reputación agregada en la cabecera */
.studio-rep { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.studio-rep__stars {
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    padding: 5px 12px; border-radius: var(--radius-pill);
    background: rgba(255,231,48,.1); border: 1px solid rgba(255,231,48,.22);
}
.studio-rep__avg { font-weight: 700; color: var(--hueso); font-size: 15px; }
.studio-rep__star { color: var(--verde-marca); }
.studio-rep__count { color: var(--gris-meta); font-size: 13px; }
.studio-rep__score { font-size: 13px; color: var(--gris-meta); }
.studio-rep__score strong { color: var(--hueso); }

/* Badge de posición en el ranking interno */
.studio-rank {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; margin-right: 4px;
    font-family: var(--font-display); font-weight: 800; font-size: 13px;
    background: rgba(255,255,255,.06); color: var(--gris-meta);
    border: 1px solid var(--glass-border);
}
.studio-rank--1 { background: linear-gradient(145deg,#FFE730,#d9a400); color:#1a1500; border-color:transparent; }
.studio-rank--2 { background: linear-gradient(145deg,#d8d8d8,#9a9a9a); color:#1a1a1a; border-color:transparent; }
.studio-rank--3 { background: linear-gradient(145deg,#e0915a,#a85f2e); color:#1a0d00; border-color:transparent; }
.studio-rank__score { color: var(--verde-marca); font-size: 12px; font-weight: 600; }

/* Mapa en 2 columnas (mapa + tarjeta de info) */
.studio-loc { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: stretch; margin-top: 14px; }
.studio-loc__map { min-height: 320px; }
.studio-loc .studio-map { height: 100%; min-height: 320px; }
.studio-loc__info {
    display: flex; flex-direction: column; gap: 14px;
    background: rgba(20,22,22,.55); border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); padding: var(--stack-sm, 20px);
}
.studio-loc__addr { display: flex; align-items: flex-start; gap: 9px; color: rgba(226,226,226,.85); font-size: var(--t-body-md); line-height: 1.5; }
.studio-loc__addr svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--verde-marca); margin-top: 1px; }
.studio-loc__facts { list-style: none; display: flex; flex-direction: column; gap: 9px; padding: 14px 0; border-top: 1px solid var(--border-5); border-bottom: 1px solid var(--border-5); }
.studio-loc__facts li { font-size: var(--t-body-md); color: rgba(226,226,226,.78); }
.studio-loc__facts strong { color: var(--hueso); }
.studio-loc__contact { display: inline-flex; align-items: center; gap: 8px; color: var(--gris-meta); text-decoration: none; font-size: var(--t-body-md); transition: color .15s; }
.studio-loc__contact svg { width: 16px; height: 16px; }
.studio-loc__contact:hover { color: var(--verde-marca); }

/* Reseñas del estudio */
.studio-reviews__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.studio-reviews__sub { color: var(--gris-meta); font-size: var(--t-body-md); margin-top: 4px; }
.studio-reviews__score { display: flex; align-items: center; gap: 12px; }
.studio-reviews__avg { font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1; color: var(--hueso); }
.studio-reviews__count { font-size: 12px; color: var(--gris-meta); }
.studio-reviews__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.studio-review {
    background: rgba(20,22,22,.55); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.studio-review__top { display: flex; align-items: center; justify-content: space-between; }
.studio-review__verified { font-size: 11px; font-weight: 700; color: #36d399; }
.studio-review__text { color: rgba(226,226,226,.88); line-height: 1.6; font-size: var(--t-body-md); }
.studio-review__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; font-size: 13px; }
.studio-review__author { font-weight: 700; color: var(--hueso); }
.studio-review__about { color: var(--gris-meta); }
.studio-review__about a { color: var(--verde-marca); text-decoration: none; }
.studio-review__about a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .studio-loc { grid-template-columns: 1fr; }
    .studio-loc__map, .studio-loc .studio-map { min-height: 240px; }
    .studio-reviews__grid { grid-template-columns: 1fr; }
}

/* ── Ranking: pestañas tatuadores/estudios + sección de estudios ── */
.ranking-tabs { display: inline-flex; gap: 6px; margin-top: 22px; padding: 5px; background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); }
.ranking-tab {
    padding: 8px 20px; border-radius: var(--radius-pill);
    font-size: 14px; font-weight: 600; color: var(--gris-meta); text-decoration: none;
    transition: all .18s;
}
.ranking-tab:hover { color: var(--hueso); }
.ranking-tab--activo { background: var(--verde-marca); color: #1a1500; }

.ranking-studios { border-top: 1px solid var(--border-5); }
.ranking-studios__head { margin-bottom: 20px; }
.ranking-studios__sub { color: var(--gris-meta); font-size: var(--t-body-md); margin-top: 6px; }
.ranking-row__pos--top { color: var(--verde-marca); }

/* ═══════════════════════════════════════════════════════════════
   BANDEJA DE SOLICITUDES (panel artista y estudio)
   ═══════════════════════════════════════════════════════════════ */
.inbox-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 8px; }
.inbox-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: var(--radius-pill);
    background: rgba(255,255,255,.04); border: 1px solid var(--glass-border);
    color: var(--gris-meta); text-decoration: none; font-size: 14px; font-weight: 600;
    transition: all .15s;
}
.inbox-tab:hover { color: var(--hueso); }
.inbox-tab span {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px;
}
.inbox-tab--activo { background: var(--verde-marca); color: #1a1500; border-color: transparent; }
.inbox-tab--activo span { background: rgba(0,0,0,.18); color: #1a1500; }

.inbox-list { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.inbox-card {
    display: flex; gap: 20px; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap;
    background: rgba(20,22,22,.55); border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); padding: 20px;
    border-left: 3px solid transparent;
}
.inbox-card--new       { border-left-color: var(--verde-marca); }
.inbox-card--contacted { border-left-color: #36d399; }
.inbox-card--closed    { opacity: .62; }
.inbox-card__main { flex: 1 1 320px; min-width: 0; }
.inbox-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.inbox-card__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--hueso); }
.inbox-card__para { font-size: 13px; color: var(--gris-meta); }
.inbox-card__para a { color: var(--verde-marca); text-decoration: none; }
.inbox-card__detalles { font-size: 14px; color: rgba(226,226,226,.82); margin-bottom: 8px; }
.inbox-card__msg { font-size: 14px; color: rgba(226,226,226,.72); line-height: 1.55; margin-bottom: 8px; }
.inbox-card__meta { font-size: 12px; color: var(--gris-meta); }

.inbox-badge { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; }
.inbox-badge--new       { background: rgba(255,231,48,.14); color: var(--verde-marca); }
.inbox-badge--contacted { background: rgba(54,211,153,.14); color: #36d399; }
.inbox-badge--closed    { background: rgba(255,255,255,.06); color: var(--gris-meta); }

.inbox-card__actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; flex: 0 0 auto; min-width: 190px; }
.inbox-status-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inbox-status-form .inbox-btn { flex: 1; }
.inbox-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px; border-radius: var(--radius-md);
    font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; transition: all .15s; white-space: nowrap;
}
.inbox-btn--wa    { background: #25D366; color: #04361c; }
.inbox-btn--wa:hover { filter: brightness(1.08); }
.inbox-btn--mail  { background: rgba(255,255,255,.06); color: var(--hueso); border-color: var(--glass-border); }
.inbox-btn--ghost { background: transparent; color: var(--gris-meta); border-color: var(--glass-border); font-weight: 600; }
.inbox-btn--ghost:hover { color: var(--hueso); border-color: var(--gris-meta); }

@media (max-width: 600px) {
    .inbox-card { flex-direction: column; }
    .inbox-card__actions { width: 100%; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   GESTIÓN DE RESEÑAS (panel artista/estudio) + respuesta + apelación
   ═══════════════════════════════════════════════════════════════ */
.rev-manage-list { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.rev-manage {
    background: rgba(20,22,22,.55); border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); padding: 20px;
    border-left: 3px solid transparent;
}
.rev-manage--visible  { border-left-color: #36d399; }
.rev-manage--revision { border-left-color: var(--verde-marca); }
.rev-manage--retirada { opacity: .6; }
.rev-manage__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rev-manage__author { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--hueso); }
.rev-manage__for { font-size: 13px; color: var(--gris-meta); margin-left: 6px; }
.rev-manage__for a { color: var(--verde-marca); text-decoration: none; }
.rev-manage__stars { margin-left: 8px; }
.rev-manage__comment { font-size: 14px; color: rgba(226,226,226,.85); line-height: 1.55; margin-bottom: 6px; }
.rev-manage__date { font-size: 12px; color: var(--gris-meta); }
.rev-manage__appeal {
    margin-top: 12px; padding: 10px 14px; font-size: 13px;
    background: rgba(255,231,48,.07); border: 1px solid rgba(255,231,48,.2);
    border-radius: var(--radius-md); color: rgba(226,226,226,.8);
}
.rev-manage__reply {
    margin-top: 12px; padding: 12px 14px;
    background: rgba(255,255,255,.03); border-left: 2px solid var(--verde-marca);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.rev-manage__reply-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--verde-marca); }
.rev-manage__reply p { font-size: 14px; color: rgba(226,226,226,.8); margin-top: 4px; }

.rev-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.rev-badge--visible  { background: rgba(54,211,153,.14); color: #36d399; }
.rev-badge--revision { background: rgba(255,231,48,.14); color: var(--verde-marca); }
.rev-badge--retirada { background: rgba(255,255,255,.06); color: var(--gris-meta); }

.rev-manage__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.rev-action { flex: 1 1 auto; }
.rev-action > summary { list-style: none; display: inline-flex; cursor: pointer; }
.rev-action > summary::-webkit-details-marker { display: none; }
.rev-action__form { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.rev-action__form .tf-textarea { width: 100%; }
.rev-action__form .btn-rojo { align-self: flex-start; }
.rev-action__hint { font-size: 12px; color: var(--gris-meta); line-height: 1.5; }

/* Respuesta pública en el perfil */
.review-card__reply, .studio-review__reply {
    margin-top: 10px; padding: 10px 14px;
    background: rgba(255,255,255,.03); border-left: 2px solid var(--verde-marca);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.review-card__reply-label, .studio-review__reply-label {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--verde-marca);
}
.review-card__reply p, .studio-review__reply p { font-size: 14px; color: rgba(226,226,226,.78); margin-top: 4px; line-height: 1.5; }

/* Aviso de apelación en el panel admin */
.resena-row__appeal {
    margin: 10px 0; padding: 10px 14px;
    background: rgba(255,231,48,.08); border: 1px solid rgba(255,231,48,.25);
    border-radius: var(--radius-md); font-size: 13px;
}
.resena-row__appeal strong { color: var(--verde-marca); }

/* ═══════════════════════════════════════════════════════════════
   PÁGINA PÚBLICA DE INVITACIÓN A RESEÑA (/opinar/{token})
   ═══════════════════════════════════════════════════════════════ */
.opinar-wrap { max-width: 560px; margin: 0 auto; padding: 48px 20px 80px; }
.opinar-card {
    background: rgba(20,22,22,.6); border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); padding: 36px 28px; text-align: center;
    box-shadow: var(--shadow-lg);
}
.opinar-avatar { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; overflow: hidden; border: 2px solid var(--verde-marca); }
.opinar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.opinar-eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--verde-marca); font-weight: 700; margin-bottom: 8px; }
.opinar-sub { color: var(--gris-meta); margin: 8px 0 24px; }
.opinar-form { text-align: left; display: flex; flex-direction: column; gap: 18px; }
.opinar-form .star-picker { justify-content: center; }
.star-picker--lg .star-picker__star { font-size: 38px; }
.opinar-thanks__icon {
    width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
    display: grid; place-items: center; font-size: 30px;
    background: rgba(54,211,153,.15); color: #36d399;
}
.opinar-thanks p { color: var(--gris-meta); margin-top: 8px; }

/* Resultado de invitación generada (panel) */
.invite-result {
    margin-top: 14px; padding: 16px; border-radius: var(--radius-md);
    background: rgba(54,211,153,.07); border: 1px solid rgba(54,211,153,.25);
}
.invite-result__label { font-size: 13px; color: #36d399; font-weight: 700; margin-bottom: 8px; }
.invite-result__link {
    display: block; word-break: break-all; font-size: 13px; color: var(--hueso);
    background: rgba(0,0,0,.25); padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 12px;
}
.invite-result__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Área Pro de invitaciones de reseña (panel) ── */
.invite-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.invite-stat {
    flex: 1 1 120px; background: rgba(255,255,255,.03); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); padding: 14px 16px; text-align: center;
}
.invite-stat__num { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--verde-marca); }
.invite-stat__lbl { font-size: 12px; color: var(--gris-meta); }

.pro-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.pro-tool { background: rgba(255,255,255,.025); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 18px; }
.pro-tool__title { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.pro-tool__desc { font-size: 13px; color: var(--gris-meta); line-height: 1.5; margin-bottom: 12px; }
.pro-pill { font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; background: var(--verde-marca); color: #1a1500; }
.pro-qr { display: inline-block; padding: 10px; background: #fff; border-radius: var(--radius-sm); }
.pro-qr img, .pro-qr canvas { display: block; }

.pro-upsell {
    margin-top: 16px; padding: 20px;
    background: linear-gradient(150deg, rgba(255,231,48,.08), rgba(224,31,45,.06));
    border: 1px solid rgba(255,231,48,.25); border-radius: var(--radius-md);
}
.pro-upsell__title { font-family: var(--font-display); font-weight: 800; margin-bottom: 10px; }
.pro-upsell__list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.pro-upsell__list li { font-size: 14px; color: rgba(226,226,226,.85); padding-left: 22px; position: relative; }
.pro-upsell__list li::before { content: '✓'; position: absolute; left: 0; color: var(--verde-marca); font-weight: 700; }

@media (max-width: 700px) { .pro-tools { grid-template-columns: 1fr; } }

/* ── Dashboard: gráficas y tabla de rendimiento ── */
.dash-charts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin-top: 16px; }
.dash-chart-box { position: relative; height: 260px; }
.dash-chart-box canvas { max-height: 260px; }

.dash-table { display: flex; flex-direction: column; }
.dash-table__head, .dash-table__row {
    display: grid; grid-template-columns: 1fr 90px 90px; gap: 10px; align-items: center;
    padding: 12px 8px;
}
.dash-table__head { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-meta); border-bottom: 1px solid var(--border-5); }
.dash-table__head span:not(:first-child), .dash-table__row span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.dash-table__row { text-decoration: none; color: var(--hueso); border-bottom: 1px solid rgba(255,255,255,.04); transition: background .15s; }
.dash-table__row:hover { background: rgba(255,255,255,.03); }
.dash-table__artist { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.dash-table__avatar {
    width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: grid; place-items: center; background: var(--carbon-alto); color: var(--verde-marca);
    font-weight: 700; font-size: 13px;
}
.dash-table__avatar img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 800px) { .dash-charts { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   CALENDARIO DE CITAS DEL PANEL (agenda) — vista mensual
   ══════════════════════════════════════════════════════════════ */
.cal { border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; }
.cal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: var(--carbon-alto);
}
.cal__title { font-weight: 700; color: var(--hueso); }
.cal__nav {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; color: var(--hueso); text-decoration: none; font-size: 22px; line-height: 1;
    background: var(--carbon-medio);
}
.cal__nav:hover { background: var(--carbon-max); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__dow {
    text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--gris-meta); padding: 8px 0; border-bottom: 1px solid var(--glass-border);
}
.cal__cell {
    min-height: 86px; padding: 4px;
    border-right: 1px solid rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.04);
    display: flex; flex-direction: column; gap: 2px;
}
.cal__cell--empty { background: rgba(0,0,0,.15); }
.cal__cell--pasado { opacity: .5; }
.cal__cell--hoy { background: rgba(255,231,48,.06); }
.cal__num {
    font-size: 12px; color: var(--gris-meta); align-self: flex-end;
    min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
}
.cal__cell--hoy .cal__num { background: var(--verde-marca); color: var(--negro-tinta); border-radius: 50%; font-weight: 700; }
.cal__cita {
    font-size: 10px; line-height: 1.3; padding: 2px 4px; border-radius: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: rgba(255,231,48,.15); color: var(--hueso); border-left: 2px solid var(--verde-marca);
}
.cal__cita--done { background: rgba(255,255,255,.06); color: var(--gris-meta); border-left-color: var(--gris-meta); text-decoration: line-through; }
.cal__mas { font-size: 10px; color: var(--gris-meta); padding-left: 4px; }
@media (max-width: 640px) {
    .cal__cell { min-height: 58px; }
    .cal__cita { font-size: 8px; padding: 1px 3px; }
    .cal__num { font-size: 11px; }
}

/* Variantes de dash-table para el CRM (clientes) y la agenda (lista de citas) */
.dash-table--clientes .dash-table__head, .dash-table--clientes .dash-table__row { grid-template-columns: 1.4fr 1.3fr 72px 120px; }
.dash-table--agenda   .dash-table__head, .dash-table--agenda   .dash-table__row { grid-template-columns: 72px 1fr 120px; }
.dash-table--clientes .dash-table__head span, .dash-table--clientes .dash-table__row span,
.dash-table--agenda   .dash-table__head span, .dash-table--agenda   .dash-table__row span { text-align: left; }
.dash-table--clientes .dash-table__row span:last-child,
.dash-table--agenda   .dash-table__row span:last-child { text-align: right; justify-content: flex-end; }

/* ── Migas de pan (breadcrumbs) ── */
.breadcrumbs { padding: 14px 0 2px; font-size: 13px; }
.breadcrumbs__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--gris-meta); }
.breadcrumbs a { color: var(--gris-meta); text-decoration: none; transition: color .15s; }
.breadcrumbs a:hover { color: var(--hueso); }
.breadcrumbs__sep { opacity: .55; }
.breadcrumbs__current { color: var(--hueso); }

/* ══════════════════════════════════════════════════════════════
   RECURSO: consentimiento informado (/recursos/consentimiento-informado)
   Generador 100% cliente — nada se envía al servidor. Fase 3.1 de
   HOJA-DE-RUTA.md (activo enlazable).
   ══════════════════════════════════════════════════════════════ */
.consent-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.consent-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.consent-checks .style-chip { justify-content: flex-start; }

/* La hoja imprimible se ve en pantalla como preview una vez generada,
   y es la ÚNICA cosa visible al imprimir (ver @media print más abajo). */
.consent-print {
    margin-top: 28px;
    padding: 28px;
    background: var(--carbon-alto);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}
.consent-print h2 { font-family: var(--f-display); text-transform: uppercase; color: var(--hueso); margin-bottom: 14px; }
.consent-print h3 { color: var(--hueso); margin: 18px 0 8px; font-size: 15px; }
.consent-print__table { width: 100%; border-collapse: collapse; }
.consent-print__table td { padding: 6px 8px; border-bottom: 1px solid var(--glass-border); font-size: 14px; }
.consent-print__table td:first-child { color: var(--gris-meta); width: 40%; }
.consent-print__table td:last-child { color: var(--hueso); }
.consent-print ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.consent-print ul li { font-size: 14px; color: var(--hueso); }
.consent-print__legal { margin-top: 18px; font-size: 13px; color: var(--gris-meta); line-height: 1.5; }
.consent-print__signs { display: flex; justify-content: space-between; margin-top: 48px; gap: 24px; }
.consent-print__signs > div { flex: 1; border-top: 1px solid var(--glass-border); padding-top: 6px; text-align: center; font-size: 12px; color: var(--gris-meta); }

@media (max-width: 768px) {
    .consent-form__grid { grid-template-columns: 1fr; }
    .consent-print__signs { flex-direction: column; }
}

/* Al imprimir: solo la hoja de consentimiento, sin nav/footer/formulario ni
   colores oscuros (ahorra tinta y es más legible en papel). */
@media print {
    .site-nav, .site-footer, .breadcrumbs, .noise-overlay,
    .city-header, .consent-form, .consent-intro,
    .demo-banner { display: none !important; }
    body, .consent-print { background: #fff !important; color: #111 !important; }
    .consent-print {
        border: none; padding: 0; margin: 0;
        color: #111 !important;
    }
    .consent-print h2, .consent-print h3,
    .consent-print__table td:last-child,
    .consent-print ul li { color: #111 !important; }
    .consent-print__table td:first-child { color: #555 !important; }
    .consent-print__table td, .consent-print__signs > div { border-color: #ccc !important; }
}

/* ── Dashboard de KPI del admin (/panel/admin/kpi) — Fase 4.3 ── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.kpi-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--carbon-alto);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 20px;
}
.kpi-card__num { font-family: var(--f-display); font-size: 34px; color: var(--hueso); line-height: 1; }
.kpi-card__lbl { font-size: 13px; color: var(--hueso); margin-top: 6px; }
.kpi-card__sub { font-size: 12px; color: var(--gris-meta); }